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

【问题标题】：How to add multiple components on same page?如何在同一页面上添加多个组件？
【发布时间】：2018-05-05 03:44:43
【问题描述】：

我刚刚启动了一个 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!';
}

【问题讨论】：

在 AppComponent2 类上方再添加一个@Component 并将其导入 app.module.ts
你应该更多地了解装饰器是如何工作的

标签： angular typescript

【解决方案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!';
}

【讨论】：

当然，对于一个完整的应用程序，您将拥有一个主要的<app-root>，其中包含一个<router-outlet>，其中包括根据上下文（页面、访问权限、url 等）的正确组件
我们需要<router-outlet></router-outlet> in app.component.html 这种方法吗？
如果你想使用 Angular 的 Router 方法，你需要一个 router-outlet，这在理论上是可选的，但实际上对于大多数情况来说是必不可少的，因为你经常在 UI 上导航。有关使用 Angular 进行路由的更多信息：angular.io/guide/router
正如我写的那样，两个组件同时显示在主组件上，一个在另一个之上。如果你想要一个条件来显示一个或另一个，你需要导航和一个路由器。
这就是我试图理解的，我希望主组件上有多个组件，这里不涉及导航和路由。尝试实施您的答案

【解决方案2】：

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

@Component 在这里，被称为 decorator 并且它适用于它之后的单个类。所以创建另一个类不会有任何效果。

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

【讨论】：