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

【问题标题】：<head> or <script> tag in my own component, AngularJS2, ng2我自己的组件中的 <head> 或 <script> 标签，AngularJS2，ng2
【发布时间】：2016-07-04 23:47:24
【问题描述】：

我正在使用 AngularJS2，当我加载 init index.html 时，是这样的：

<!doctype html>
<html>
    <head>
        <title>demo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">   

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- 1. Load libraries -->
        <!-- IE required polyfills, in this exact order -->
        <script src="node_modules/es6-shim/es6-shim.min.js"></script>
        <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
        <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>   
        <script src="node_modules/angular2/bundles/angular2-polyfills.js"`enter code here`></script>
        <script src="node_modules/systemjs/dist/system.src.js"></script>
        <script src="node_modules/rxjs/bundles/Rx.js"></script>
        <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->

        <link href="app/css/jquery-ui.css" rel="stylesheet">
    <link href="app/css/bootstrap.min.css" rel="stylesheet">
    <link href="app/css/font-awesome.min.css" rel="stylesheet">
    <link href="app/css/style.css" rel="stylesheet">

        <script src="app/js/jquery.min.js"></script>
        <script src="app/js/jquery-ui.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="app/js/bootstrap.min.js"></script>

        <!-- 2. Configure SystemJS -->
        <script>
            System.config({
                packages: {
                    app: {
                        format: 'register',
                        defaultExtension: 'js'
                    }
                }
            });
            System.import('app/ts/main').then(null, console.error.bind(console));
        </script>
    </head>

    <!-- 3. Display the application -->
    <body>
        <div id="top-bar"></div>

        <script>
            $("#top-bar").load("app/html/navbar.html nav");
        </script>

    <my-app>Loading...</my-app>
</body>
</html>

好的，现在我正在加载 app/ts/main，它是 typescript 文件，我在其中创建主应用程序组件。该组件使用名称加载我的页面，例如 intro.html。没问题，这个页面已经加载没有错误了。

但我的问题是 - 如何在我的 intro.html 和其他 html 组件中使用脚本或标题等标签？例如上面的代码使用带有“demo”的标签标题，如果我的intro.html用标题定义了head，例如“test”，标题总是“demo”。

我的其他组件（intro.html、ticket.html 等）也无法加载脚本标签内的任何内容。所以如果我正在加载我的导航栏

<script>
    $("#top-bar").load("app/html/navbar.html nav");
</script>

我必须在 index.html 中执行此操作，而在我的其他组件（例如 intro.html）中无法执行此操作。因为任何其他组件都忽略了 script 标签，也忽略了 head 标签。所以我的问题是，如何在我的组件中而不是在 index.html 中使用 script 或 head 标签？

【问题讨论】：

标签： typescript angular

【解决方案1】：

我认为您的处理方式有误 - 您可以使用 document.title 从代码中设置页面标题，而且您几乎可以肯定将导航栏设置为 Angular 组件而不是通过脚本加载它用 jQuery 标记。我敢说，在 99% 的情况下，在 Angular 中使用 jQuery 是错误的选择——只有当你绝对需要对 DOM 进行额外级别的控制时，才需要这样做。

【讨论】：

谢谢你，你没事。我需要使用组件来编写我的页面，并且无法在组件内部加载一些 jQuery，这些组件是由 angular 加载的。

【解决方案2】：

<script> 组件模板中的标签被 Angular 剥离。您可以使用require(...) 等其他方法来包含脚本

目前对于<head>，Angular 仅提供对<title> 标记和Title 服务的支持

constructor(private title:Title) {
}

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

您可以直接访问@JoeClay 提到的document.title，但这种方法与 Angulars 服务器端渲染或 WebWorkers 不兼容。

我在讨论中看到它提到计划对更多浏览器 API 进行抽象，但没有任何信息说明他们计划何时实现它们。

还有DOM 引用（DomAdapter 实例）允许以与 WebWorker 兼容的方式访问浏览器 API（虽然 https://github.com/angular/angular/issues/6904 目前存在一个未解决的问题）

【讨论】：