Question

当我加载init index.html时，我正在使用AngularJS2，如下所示：

＆＃xA;＆＃xA;

 ＆lt;！doctype html＆gt;＆＃xA;＆lt; ; HTML＆GT;＆＃XA; ＆LT; HEAD＆GT;＆＃XA; ＆LT;标题＆GT;演示＆LT; /标题＆GT;＆＃XA; ＆lt; meta name =“viewport”content =“width = device-width，initial-scale = 1”＆gt; ＆＃XA;＆＃XA; ＆lt; meta charset =“utf-8”＆gt;＆＃xA; ＆lt; meta http-equiv =“X-UA-Compatible”content =“IE = edge”＆gt;＆＃xA; ＆lt; meta name =“viewport”content =“width = device-width，initial-scale = 1”＆gt;＆＃xA;＆＃xA; ＆lt;！ -  1.加载库 - ＆gt;＆＃xA; ＆lt;！ -  IE所需的polyfills，按照这个确切的顺序 - ＆gt;＆＃xA; ＆lt; script src =“node_modules / es6-shim / es6-shim.min.js”＆gt;＆lt; / script＆gt;＆＃xA; ＆lt; script src =“node_modules / systemjs / dist / system-polyfills.js”＆gt;＆lt; / script＆gt;＆＃xA; ＆lt; script src =“node_modules / angular2 / es6 / dev / src / testing / shims_for_IE.js”＆gt;＆lt; / script＆gt; ＆＃XA; ＆lt; script src =“node_modules / angular2 / bundles / angular2-polyfills.js”`在此处输入代码`＆gt;＆lt; / script＆gt;＆＃xA; ＆lt; script src =“node_modules / systemjs / dist / system.src.js”＆gt;＆lt; / script＆gt;＆＃xA; ＆lt; script src =“node_modules / rxjs / bundles / Rx.js”＆gt;＆lt; / script＆gt;＆＃xA; ＆lt; script src =“node_modules / angular2 / bundles / angular2.dev.js”＆gt;＆lt; / script＆gt;＆＃xA;＆＃xA; ＆lt;！ -  HTML5 shim和Respond.js，用于IE8支持HTML5元素和媒体查询 - ＆gt;＆＃xA; ＆lt;！ - 警告：如果您通过file：//  - ＆gt;＆＃xA查看页面，则Respond.js不起作用; ＆lt;！ -  [if lt IE 9]＆gt;＆＃xA; ＆lt; script src =“https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js”＆gt;＆lt; / script＆gt;＆＃xA; ＆lt; script src =“https://oss.maxcdn.com/respond/1.4.2/respond.min.js”＆gt;＆lt; / script＆gt;＆＃xA;百分比抑制率ENDIF]  -  GT;！＆＃XA;＆＃XA; ＆lt; link href =“app / css / jquery-ui.css”rel =“stylesheet”＆gt;＆＃xA; ＆lt; link href =“app / css / bootstrap.min.css”rel =“stylesheet”＆gt;＆＃xA; ＆lt; link href =“app / css / font-awesome.min.css”rel =“stylesheet”＆gt;＆＃xA; ＆lt; link href =“app / css / style.css”rel =“stylesheet”＆gt;＆＃xA;＆＃xA; ＆lt; script src =“app / js / jquery.min.js”＆gt;＆lt; / script＆gt;＆＃xA; ＆lt; script src =“app / js / jquery-ui.min.js”＆gt;＆lt; / script＆gt;＆＃xA; ＆lt;！ - 包括所有已编译的插件（如下所示），或根据需要包含单个文件 - ＆gt;＆＃xA; ＆lt; script src =“app / js / bootstrap.min.js”＆gt;＆lt; / script＆gt;＆＃xA;＆＃xA; ＆lt;！ -  2.配置SystemJS  - ＆gt;＆＃xA; ＆LT;脚本＆GT;＆＃XA; System.config（{＆＃xA; packages：{＆＃xA; app：{＆＃xA; format：'register'，＆＃xA; defaultExtension：'js'＆＃xA;}＆＃xA;}＆＃ xA;}）;＆＃xA; System.import（'app / ts / main'）。then（null，console.error.bind（console））;＆＃xA; ＆LT; /脚本＆GT;＆＃XA; ＆LT; /头＆GT;＆＃XA;＆＃XA; ＆lt ;!  -  3.显示应用程序 - ＆gt;＆＃xA; ＆LT;身体GT;＆＃XA; ＆lt; div id =“top-bar”＆gt;＆lt; / div＆gt;＆＃xA;＆＃xA; ＆LT;脚本＆GT;＆＃XA; $（“＃top-bar”）。load（“app / html / navbar.html nav”）;＆＃xA; ＆LT; /脚本＆GT;＆＃XA;＆＃XA; ＆LT;我的应用内的载量...＆LT; /我的应用内＆GT;＆＃XA;＆LT; / BODY＆GT;＆＃XA;＆LT; / HTML＆GT;＆＃XA;

＆＃XA ;＆＃xA; 好的，现在我正在加载app / ts / main，这是typescript文件，我正在创建主应用程序组件。此组件使用名称加载我的页面，例如intro.html。没有问题，这个页面已经加载了没有错误。
＆＃xA;＆＃xA; 但我的问题是 - 如何在我的intro.html中使用脚本或头文件等标签其他HTML组件？例如，上面的代码使用带有“demo”的标签标题，如果我的intro.html定义带有标题的头部，例如“test”，则标题始终为“demo”。 
＆＃xA;＆＃xA; 此外，我的其他组件（intro.html，ticket.html等）无法加载脚本标记内的任何内容。因此，如果我正在加载导航栏
＆＃xA;＆＃xA;  ＆lt; script＆gt;＆＃xA; $（“＃top-bar”）。load（“app / html / navbar.html nav”）;＆＃xA;＆lt; / script＆gt;＆＃xA;  
＆＃xA;＆ #xA; 我必须在index.html中这样做，我不能在我的其他组件中这样做，例如intro.html。因为任何其他组件都会忽略脚本标记，也会忽略标记标记。所以我的问题是，如何在我的组件中而不是在index.html中使用脚本或头标记？＆＃xA;

Answer 1

我认为你正在接近错误的方式 - 你可以使用document.title从你的代码设置页面标题，而你几乎肯定会让你的导航栏成为Angular组件而不是加载它一个带有jQuery的脚本标记。我甚至可以说99％的时间在Angular中使用jQuery是错误的选择 - 当你绝对需要对DOM进行额外的控制时，它只能达到目的。

Answer 2

Angular会剥离组件模板中的

<script>个标签。您可以使用其他方法（如require(...)）来包含脚本

目前<head> Angular仅为<title>服务<{1}}标记提供支持

constructor(private title:Title) {
}

someMethod() {
  this.title.setTitle('new Title');
}

您可以直接访问@JoeClay所提及的document.title，但该方法与Angulars服务器端呈现或WebWorkers不兼容。

我已经看到它在讨论中提到计划更多浏览器API的抽象，但是当他们计划实现它们时没有信息。

还有DOM引用（DomAdapter实例）允许以WebWorker兼容的方式访问浏览器API（目前存在一个未解决的问题Title）

或者我自己组件中的<script>标签，AngularJS2，ng2

2 个答案: