如何多次重用角度分量

Question

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. 我正在学习角度的基础知识，但我仍然无法弄清楚如何在同一文档中多次重复使用相同的组件。

This is the relevant code: 这是相关代码：

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>

and this is the main index.html 这是主要的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>

The problem is: i wanted angular to add the component to every "example" tag in index.html. 问题是：我希望angular将组件添加到index.html中的每个“example”标记。 But i see it works only for the first tag while the others are ignored. 但我发现它仅适用于第一个标签，而其他标签则被忽略。 Can you help me to understand this behaviour? 你能帮助我理解这种行为吗？

thanks in advance 提前致谢

Answer 1

The problem is that in your application the example is the root component. 问题是在您的应用程序中，该example是根组件。 Angular process only one DOM element for the root component at the top level. Angular在顶层只处理根组件的一个DOM元素。 Here is how you can modify your example template to see it rendered multiple times: 以下是如何修改example模板以查看多次呈现的example ：

<h1>Hello {{name}}</h1>
<button (click)="changeName()">Click me!</button>

<!-- rendered multiple times -->
<b-comp></b-comp>
<b-comp></b-comp>

And add BComponent into the application: 并将BComponent添加到应用程序中：

@Component({
  selector: 'b-comp',
  template: `<span>b-comp</span>`
})

export class BComponent {
}

And add it to the declarations in AppModule : 并将其添加到AppModule的declarations ：

@NgModule({
   imports:      [ BrowserModule ],
   declarations: [ AppComponentl, BComponent ],
   bootstrap:    [ AppComponent ]
})

如何多次重用角度分量

问题描述

1 个解决方案

解决方案1
4 已采纳 2017-05-19 13:34:37

如何多次重用角度分量

问题描述

1 个解决方案

解决方案1 4 已采纳 2017-05-19 13:34:37

解决方案1
4 已采纳 2017-05-19 13:34:37