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

Posted 2023-02-23

【中文标题】如何使用angular2在单个组件中调用多个模板

【英文标题】：How to call multiple templates in single component using 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");
            
        );
    

【参考方案1】：

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

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