如何多次重用角度分量 [英] How to reuse an angular component multiple times
问题描述
我正在学习角度的基础知识，但我仍然无法弄清楚如何在同一个文档中多次重复使用相同的组件。
I'm learning the basics of angular, but i still can't figure out how to reuse the same component multiple times in the same document.
这是相关代码：
test.module.ts
test.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './test.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
test.component.ts
test.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'example',
templateUrl: "./test.component.html",
styleUrls: ["./test-common.css"],
})
export class AppComponent {
name = 'Angular';
changeName() {
this.name = "duck";
}
}
test.component.html
test.component.html
<h1>Hello {{name}}</h1>
<button (click)="changeName()">Click me!</button>
这是主要的index.html
and this is the main index.html
<!DOCTYPE html>
<html>
<head>
<title>Angular QuickStart</title>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('main.js').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<example>Loading ...</example>
<example>Loading ...</example>
<example>Loading ...</example>
<example>Loading ...</example>
</body>
</html>
问题是：我想让angular将组件添加到index.html中的每个example标签。但我发现它仅适用于第一个标签，而其他标签则被忽略。你能帮助我理解这种行为吗？
The problem is: i wanted angular to add the component to every "example" tag in index.html. But i see it works only for the first tag while the others are ignored. Can you help me to understand this behaviour?
提前谢谢
推荐答案
<问题是，在您的应用程序中，示例是根组件。 Angular在顶层只处理根组件的一个DOM元素。以下是修改示例模板以查看多次渲染的方法：
The problem is that in your application the example is the root component. Angular process only one DOM element for the root component at the top level. Here is how you can modify your example template to see it rendered multiple times:
<h1>Hello {{name}}</h1>
<button (click)="changeName()">Click me!</button>
<!-- rendered multiple times -->
<b-comp></b-comp>
<b-comp></b-comp>
并将 BComponent 添加到应用程序中：
And add BComponent into the application:
@Component({
selector: 'b-comp',
template: `<span>b-comp</span>`
})
export class BComponent {
}
并将其添加到 AppModule 中的声明：
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponentl, BComponent ],
bootstrap: [ AppComponent ]
})
这篇关于如何多次重用角度分量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
