如何在同一页面上添加多个组件？

Question

我刚刚开始使用Angular应用，所以我想在同一页面上添加多个组件。这在Angular中如何工作？让我们假设每个div都是一个单独的组件以及视图。组件必须位于单独的.ts文件中。

以下是否有效？

app.component.html：

<div>APP Component1</div>
<div>App Component2</div>

app.component.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!';
}

Answer 1

为了做到这一点，你实际上需要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!';
}

Answer 2

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

这里的

@Component 被称为装饰器，它适用于跟随它的单个类。所以创建另一个类不会产生任何影响。

建议使用新类创建新组件。该类的变量和函数将在该组件的范围内。