如何使用Angular访问从TS文件到HTML文件的可变值？

发布于 2025-02-04 05:59:20 字数 1397 浏览 3 评论 0原文

front-layout.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-front-layout',
  templateUrl: './front-layout.component.html',
  styleUrls: ['./front-layout.component.css']
})
export class FrontLayoutComponent implements OnInit {

  host:any;
  constructor() { }

  ngOnInit(): void {

    this.host = "http://localhost:4200";

  }

}

front-layout.component.html

<!DOCTYPE html>
<html lang="en"><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <title></title>
    <link rel="stylesheet" href="'{{ host }}'/assets/front/css/bootstrap.min.css">
    <link rel="stylesheet" href="'{{ host }}'/assets/front/plugins/select2/css/select2.min.css">
</head>
<body>
    <div class="main-wrapper">
        <router-outlet></router-outlet>
    </div>
    <script src="'{{ host }}'/assets/front/js/jquery-3.6.0.min.js"></script>
</body>
</html>

在上述代码中我只是声明host host 并尝试在我的html组件中访问，但它会丢弃一个错误，即src/app/app/组件/front/front-layout/front-layout.component.ts：5：16-错误ng2008：找不到stylesheet文件''{{host}}'/assets/assets/css/css/bootstrap.min.min.css'链接从模板。。不知道为什么变量不起作用？请帮我。

谢谢

原文

front-layout.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-front-layout',
  templateUrl: './front-layout.component.html',
  styleUrls: ['./front-layout.component.css']
})
export class FrontLayoutComponent implements OnInit {

  host:any;
  constructor() { }

  ngOnInit(): void {

    this.host = "http://localhost:4200";

  }

}

front-layout.component.html

<!DOCTYPE html>
<html lang="en"><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <title></title>
    <link rel="stylesheet" href="'{{ host }}'/assets/front/css/bootstrap.min.css">
    <link rel="stylesheet" href="'{{ host }}'/assets/front/plugins/select2/css/select2.min.css">
</head>
<body>
    <div class="main-wrapper">
        <router-outlet></router-outlet>
    </div>
    <script src="'{{ host }}'/assets/front/js/jquery-3.6.0.min.js"></script>
</body>
</html>

In the above code I simply declare host and try to access in my html component but it throw an error i.e. src/app/component/front/front-layout/front-layout.component.ts:5:16 - error NG2008: Could not find stylesheet file ''{{ host }}'/assets/front/css/bootstrap.min.css' linked from the template.. No idea why variable not working? Please help me.

Thank You

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我是有多爱你 2025-02-11 05:59:20

我相信您应该将链接和脚本移至index.html，然后从那里使用此路径

./assets/front/js/jquery-3.6.0.min.js

I believe you should move the links and scripts to index.html, and from there, use this path

./assets/front/js/jquery-3.6.0.min.js

回复收藏 0 原文

神魇的王 2025-02-11 05:59:20

要加载主机

必须是[HREF]和[src]而不是HREF和src

而不是
href =“'{{host}}'/assets/front/css/bootstrap.min.css”

必须是
[href] =“ host +'/assets/front/css/bootstrap.min.css'”，

<!DOCTYPE html>
<html lang="en"><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <title></title>
    <link rel="stylesheet" [href]="host + '/assets/front/css/bootstrap.min.css'">
    <link rel="stylesheet" [href]="host + '/assets/front/plugins/select2/css/select2.min.css'">
</head>
<body>
    <div class="main-wrapper">
        
    </div>
    <script [src]="host + '/assets/front/js/jquery-3.6.0.min.js'"></script>
</body>
</html>

在Angular中，所有这些内容都是在index.html中完成的

但动态加载脚本

脚本

import { Injectable , Renderer2, RendererFactory2 } from '@angular/core';
import { ScriptStore } from '../../store/store.script';

@Injectable({
  providedIn: 'root'
})

export class LoadScriptService {
  private scripts: any = {};
  private renderer: Renderer2;

  constructor(rendererFactory: RendererFactory2) {
    this.renderer = rendererFactory.createRenderer(null, null);
    this.getScripts();
  }

  private getScripts() {   
    ScriptStore.forEach((script: any) => {
      this.scripts[script.name] = { src: script.src, loaded: script.loaded }
    });
  }

  load(scriptName: string[]) {
    scriptName.forEach((script: any) => {
      this.loadScript(script);
    });
  }

  private loadScript(name: string) {
    if (this.scripts[name].loaded) {
      return;
    }

    let script = this.renderer.createElement('script');
    script.src = this.scripts[name].src;

    document.getElementsByTagName('head')[0].appendChild(script);
    this.scripts[name].loaded = true;
  }
}

如何从任何组件

import { Script } from "../interfaces/schema.script";

export const ScriptStore: Script[] = [
    { name: 'typeform', src: '//embed.typeform.com/next/embed.js', loaded: false }
     * import here script info in object format. ex:
     * { name: 'script1', src: 'url1', loaded: false } 
     * { name: 'script2', src: 'url2', loaded: false }
     * { name: 'script3', src: 'url3', loaded: false }
];

。

export interface Script {
    name: string;
    src: string;
    loaded: boolean;
}

中 /code>函数this.scriptservice.load（'script's name'）或this.scriptservice.load（'script's name1'，'script's name2'，'script's name3'）

To load the content of host

Must be [href] and [src] instead of href and src

and instead of
href="'{{ host }}'/assets/front/css/bootstrap.min.css"

must be
[href]="host + '/assets/front/css/bootstrap.min.css'"

<!DOCTYPE html>
<html lang="en"><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <title></title>
    <link rel="stylesheet" [href]="host + '/assets/front/css/bootstrap.min.css'">
    <link rel="stylesheet" [href]="host + '/assets/front/plugins/select2/css/select2.min.css'">
</head>
<body>
    <div class="main-wrapper">
        
    </div>
    <script [src]="host + '/assets/front/js/jquery-3.6.0.min.js'"></script>
</body>
</html>

But in angular all this stuff is done in index.html

This is how you dynamically load scripts in angular from any component

script.service.ts

import { Injectable , Renderer2, RendererFactory2 } from '@angular/core';
import { ScriptStore } from '../../store/store.script';

@Injectable({
  providedIn: 'root'
})

export class LoadScriptService {
  private scripts: any = {};
  private renderer: Renderer2;

  constructor(rendererFactory: RendererFactory2) {
    this.renderer = rendererFactory.createRenderer(null, null);
    this.getScripts();
  }

  private getScripts() {   
    ScriptStore.forEach((script: any) => {
      this.scripts[script.name] = { src: script.src, loaded: script.loaded }
    });
  }

  load(scriptName: string[]) {
    scriptName.forEach((script: any) => {
      this.loadScript(script);
    });
  }

  private loadScript(name: string) {
    if (this.scripts[name].loaded) {
      return;
    }

    let script = this.renderer.createElement('script');
    script.src = this.scripts[name].src;

    document.getElementsByTagName('head')[0].appendChild(script);
    this.scripts[name].loaded = true;
  }
}

store.script.ts

import { Script } from "../interfaces/schema.script";

export const ScriptStore: Script[] = [
    { name: 'typeform', src: '//embed.typeform.com/next/embed.js', loaded: false }
     * import here script info in object format. ex:
     * { name: 'script1', src: 'url1', loaded: false } 
     * { name: 'script2', src: 'url2', loaded: false }
     * { name: 'script3', src: 'url3', loaded: false }
];

interfaces/schema.script.ts

export interface Script {
    name: string;
    src: string;
    loaded: boolean;
}

Then you import script.service in any component and call load function this.scriptService.load('script's name') or this.scriptService.load('script's name1', 'script's name2', 'script's name3')

回复收藏 0 原文

~没有更多了~