我刚刚启动了一个 Angular 应用程序,所以我想在同一页面上添加多个组件。这在 Angular 中是如何工作的?让我们假设每个 div 将是一个单独的组件以及 View 。这些组件必须位于单独的 .ts 文件中。
下面的方法行得通吗?
应用程序组件.html:
<div>APP Component1</div>
<div>App Component2</div>
应用程序组件.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent1 {
title = 'app works!';
}
export class AppComponent2 {
title = 'app works!';
}
最佳答案
为此,您实际上需要 3 个组件。 Angular 应用程序的主要组件,以及您要显示的两个组件。这将给出以下文件结构。
主要成分
app.component.html:
<div>{{title}}</div>
<app-comp1></app-comp1>
<app-comp2></app-comp2>
app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
title = 'App works!';
}
组件 n°1
comp1.component.html:
<div>{{title}}</div>
comp1.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-comp1',
templateUrl: './comp1.component.html',
styleUrls: ['./comp1.component.css']
})
export class AppComponent1 {
title = 'AppComponent1 works!';
}
组件 n°2
comp2.component.html:
<div>{{title}}</div>
comp2.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-comp2',
templateUrl: './comp2.component.html',
styleUrls: ['./comp2.component.css']
})
export class AppComponent2 {
title = 'AppComponent2 works!';
}
关于angular - 如何在同一页面上添加多个组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47417152/