Angular 5单页面多组件实现咨询：替代AngularJS多控制器方案

嘿，我完全懂你从AngularJS切换到Angular 5时的迷茫——毕竟这俩框架的核心思路差得挺多的！你在AngularJS里用ng-controller实现单页多控制器的方式，在Angular（包括5版本）里已经被**组件（Component）**彻底取代了，组件是Angular的核心构建块，它把模板、样式和逻辑打包在一起，比原来的控制器更模块化、更好维护。

下面我一步步教你怎么实现类似的效果：

步骤1：拆分出独立的组件 #

你原来的widgetController和menuController，在Angular 5里要拆成两个独立的组件——每个组件对应原来一个控制器的功能：

Widget组件示例

如果用Angular CLI生成组件，命令是ng generate component widget，手动编写的话代码大概是这样：

// widget.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-widget', // 组件的选择器，相当于自定义标签
  template: `
    <p>Stuff here</p>
  `,
  // 也可以用 templateUrl: './widget.component.html' 指向外部模板文件
})
export class WidgetComponent {
  // 原来widgetController里的业务逻辑（属性、方法）都写在这里
}

Menu组件示例

同样创建Menu组件：

// menu.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-menu',
  template: `
    <p>Other stuff here</p>
  `,
})
export class MenuComponent {
  // 原来menuController的逻辑放在这里
}

步骤2：在根组件中引入这两个组件 #

接下来，你只需要在根组件（通常是AppComponent）的模板里使用这两个组件，就像你原来在AngularJS里放两个带ng-controller的div一样：

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <app-widget class="widget"></app-widget>
    <app-menu class="menu"></app-menu>
  `,
})
export class AppComponent { }

关键：在模块中声明组件 #

别忘了要在你的AppModule里声明这两个组件，否则Angular会识别不了它们：

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { WidgetComponent } from './widget/widget.component';
import { MenuComponent } from './menu/menu.component';

@NgModule({
  declarations: [
    AppComponent,
    WidgetComponent,
    MenuComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

为什么要这么做？ #

Angular的组件模式相比AngularJS的控制器+模板方式，优势很明显：

• 组件是自包含的，样式、模板和逻辑都绑定在一起，更容易复用和维护
• 组件之间的通信规则更清晰（通过输入输出属性、服务等方式）
• 完全符合现代前端的模块化开发理念

这样一来，你就实现了和AngularJS里单页多控制器类似的效果，而且是Angular 5推荐的最佳实践哦！

内容的提问来源于stack exchange，提问作者UserMan