如何使用angular2在单个组件中调用多个模板答案

【问题标题】：How to call multiple templates in single component using angular2如何使用angular2在单个组件中调用多个模板
【发布时间】：2017-04-15 22:27:18
【问题描述】：

我是 angularJs2 的新手。我的要求是我想要单个组件中的多个模板。就像我有ForgetPasswordComponent 一样，有两条路线的名称为forgot-password 和password/reset。所以我想在 diff 路由上调用 diff-diff 模板。目前forgot-password.component.html 正在调用forgot-password 路由，现在我想调用diff。 password/reset 路线上的模板。 这是我的代码。

app-routing.module.ts

 { path: 'forgot-password', component: ForgetPasswordComponent },
{ path: 'password/reset', component: ForgetPasswordComponent },

忘记密码.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import { AlertService, AuthenticationService, ForgotpasswordService } from '../_services/index';
//import { AppSettings,IEnvVars } from '../_configs/app.settings';


@Component({
  moduleId: module.id,
  templateUrl: '../templates/forgot-password.component.html',
  providers:[AlertService, AuthenticationService,  ForgotpasswordService]
 })

export class ForgetPasswordComponent implements OnInit {
  model: any = {};
  loading = false;

  constructor(
    private router: Router,
    private authenticationService: AuthenticationService,
    private forgotpasswordService: ForgotpasswordService,
    private alertService: AlertService) { }

  ngOnInit() {
    // reset login status
    this.authenticationService.logout();
  }

  forgotPassword() {

    this.loading = true;
    this.forgotpasswordService.forgotPassword(this.model.email)
        .subscribe(
            data => console.log("yesss"),
            error => {
               console.log("yesss");
            }
        );
    }
}

【问题讨论】：

标签： templates angular routing components

【解决方案1】：

不确定 NG2 是否有内置方式来支持这一点。我的解决方案是继承。我只是使用一个基本组件类来包含所有或大部分逻辑和数据，而没有 html 模板。然后在派生的组件类中，只需要声明构造函数调用super(...)，并定义各自的html模板。

如果您的应用程序很复杂，很可能您将使用模块来实例化类，那么请确保在 Component 属性中声明 moduleId: module.id，否则 NG2 运行时可能会抱怨无法加载 html 模板。

【讨论】：