Question

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

应用-routing.module.ts

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

勿忘password.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");
            }
        );
    }
}

Answer 1

不确定NG2是否有内置方式支持此功能。我的解决方案是继承。我只是使用基本组件类来包含所有或大多数逻辑和数据，没有html模板。然后在派生的组件类中，只需要声明构造函数调用super（...），并定义相应的html模板。

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

如何使用angular2

1 个答案: