仅使用我的网络中的一个组件 [英] Use only one component in my web
问题描述
我有两个自定义组件:
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文件.我想在一页中使用这个角度应用程序.
I have in a website, several html files. I want use this angular app in one page.
我在 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>
一切正常，但是...
Everything works fine, but...
在另一页中，我要使用 Component2 .我该如何使用?我一直在尝试，但是没有成功.
In another page I want use the Component2. How can I use it? I have been trying this, but without success.
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>
推荐答案
您可以省略bootstrap选项，并在根模块上自行实现 ngDoBootstrap()方法.为了有条件地引导组件，只需在调用 appRef.bootstrap(SomeComponent); 之前执行 querySelector 来检查组件是否已在页面上.
You can omit the bootstrap option and implement ngDoBootstrap() method on your root module yourself. In order to conditionally bootstrap components just do a querySelector before calling appRef.bootstrap(SomeComponent); to check whether the component is already on the page.
因此您的模块可能如下所示:
So your module could look like:
@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
To see how it works just remove app-root tag from index.html and add my-custom-component2
这篇关于仅使用我的网络中的一个组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
