Question

我有两个自定义组件：

的Component1

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

COMPONENT2

@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文件。我想在一个页面中使用这个角度应用程序。

我在 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>

Answer 1

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

所以你的模块看起来像：

@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

在我的网站中只使用一个组件

1 个答案: