如何使用angular2調用單個組件中的多個模板

我是angularJs2的新手。我的要求是我想在單個組件中使用多個模板。就像我有ForgetPasswordComponent，有兩條路線名稱爲forgot-password和password/reset。所以我想在diff路線上調用diff-diff模板。目前forgot-password.component.html正在呼叫forgot-password路線，現在我想調用差異。模板password/reset路線。 這是我的代碼。如何使用angular2調用單個組件中的多個模板

APP-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"); 
      } 
     ); 
    } 
}

來源

2016-12-01 Prabhdeep Singh

不知道NG2有內置的方式來支持這一點。我的解決方案是繼承。我只是使用一個基本組件類來包含全部或大部分的邏輯和數據，沒有html模板。然後在派生組件類中，只需聲明構造函數調用super（...），並定義相應的html模板。

如果你的應用程序很複雜，可能你會用模塊來實例化類，然後確保你在Component屬性中聲明瞭moduleId：module.id，否則NG2運行時可能會抱怨html模板無法加載。

來源

2017-01-13 06:11:54 ZZZ

如何使用angular2調用單個組件中的多個模板

回答

相關問題