在我的网络中只使用一个组件答案

【问题标题】：Use only one component in my web在我的网络中只使用一个组件
【发布时间】：2017-09-26 21:32:20
【问题描述】：

我有两个自定义组件：

组件1

@Component({
    selector: 'my-custom-component1',
    templateUrl: './my-custom-component1.html',
    styleUrls: ['./my-custom-component1.css']
})
export class MyCustomComponent1 {
    constructor() {
        console.log('myCustomComponent1');
    }
}

组件2

@Component({
    selector: 'my-custom-component2',
    templateUrl: './my-custom-component2.html',
    styleUrls: ['./my-custom-component2.css']
})
export class MyCustomComponent2 {
    constructor() {
        console.log('myCustomComponent2');
    }
}

我在我的根组件中使用 Component1：

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

@Component({
  selector: 'app-root',
  template: `<my-custom-component1></my-custom-component1>`
})
export class AppComponent {
}

我在一个网站上有几个 html 文件。我想在一页中使用这个 Angular 应用程序。

我在file01.html中做：

<!doctype html>
<html>
<head>
  <title>file01</title>
  ...
</head>
<body>
  ...
  <app-root>Loading...</app-root>
  <script type="text/javascript" src="inline.bundle.js"></script>
  <script type="text/javascript" src="polyfills.bundle.js"></script>
  <script type="text/javascript" src="styles.bundle.js"></script>
  <script type="text/javascript" src="vendor.bundle.js"></script>
  <script type="text/javascript" src="main.bundle.js"></script>
</body>
</html>

一切正常，但是...

在另一个页面中，我想使用 Component2。我该如何使用它？我一直在尝试这个，但没有成功。

file02.html

<!doctype html>
<html>
<head>
  <title>file02</title>
  ...
</head>
<body>
  ...
  <my-custom-component2></my-custom-component2>
  <script type="text/javascript" src="inline.bundle.js"></script>
  <script type="text/javascript" src="polyfills.bundle.js"></script>
  <script type="text/javascript" src="styles.bundle.js"></script>
  <script type="text/javascript" src="vendor.bundle.js"></script>
  <script type="text/javascript" src="main.bundle.js"></script>
</body>
</html>

【问题讨论】：

您必须在另一页上使用my-custom-component2 进行引导。我相信您有这样的事情：platformBrowserDynamic() .bootstrapModule(AppComponent); 您必须在其他页面上对MyCustomComponent2 重复相同的操作。

标签： angular

【解决方案1】：

您可以省略引导选项并自己在根模块上实现ngDoBootstrap() 方法。为了有条件地引导组件，只需在调用appRef.bootstrap(SomeComponent); 之前执行querySelector 以检查组件是否已经在页面上。

所以你的模块可能看起来像：

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ 
    AppRootComponent,  // `app-root` selector
    MyCustomComponent1,
    MyCustomComponent2 // `my-custom-component2` selector
  ],
  entryComponents: [ 
    AppRootComponent,  // this is required because we need to have 
    MyCustomComponent2 // host factory for bootstrapped components
  ]
})
export class AppModule {
  ngDoBootstrap(appRef: ApplicationRef) {
    if(document.querySelector('app-root')) {
      appRef.bootstrap(AppRootComponent);
    }
    if(document.querySelector('my-custom-component2')) {
      appRef.bootstrap(MyCustomComponent2);
    }
  }
}

Plunker Example

要查看它是如何工作的，只需从 index.html 中删除 app-root 标签并添加 my-custom-component2

【讨论】：