angular - 我可以为angular2中的一个组件添加两个模板吗？

Question

我有一个包含一个 html 和 .ts 文件的组件。由于某些原因，我必须创建多页 (HTML) 页面。
是否可以为单个类(组件)创建多个(html)页面？
或者是否可以为组件提供动态的 TemplateUrl？

我的主要动机是提供不同的 URL 并使用不同的 View (HTML 页面)但使用单个类(.ts 类，即组件)？
我已经看到下面提到的许多与此相关但无法找到确切解决方案的问题-

• Dynamic template URLs in Angular 2
• How can I have dynamic templateUrl for Angular2 Component?

我想要这样的东西

{ path: '/Login', component: LogIn, name: "Login"},
{ path: '/Login2', component: LogIn, name: "Login" },
{ path: '/Login3', component: LogIn, name: "Login" }

我想用不同的 url 和 View 加载相同的组件。

Answer 1

这可以通过继承来实现。不同的 View 和样式模板，但(基本上)相同的底层组件代码。您仍然必须声明 @Component 元数据，因此如果您使用值访问器等，您也需要重新定义它们。

第一个组件:

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

import { KeyValuePairBase } from '../../model/key-value-pair-base'

@Component({
  moduleId: module.id,
  selector: 'select-list',
  templateUrl: './select-list.component.html',
  styleUrls: ['./select-list.component.scss']
})
export class SelectListComponent implements OnInit {
  @Input() private data: KeyValuePairBase[];

  constructor() {
    super();
  }

  ngOnInit() {
    if (!this.name) throw new Error("'name' property is required by 'select-list' component");
    if (!this.friendlyName) throw new Error(`'friendlyName' property is required by 'select-list' component '${this.name}'`);
  }
}

第二个组成部分:

import { Component } from '@angular/core';

import { SelectListComponent } from '../select-list/select-list.component'

@Component({
  moduleId: module.id,
  selector: 'radio-list',
  templateUrl: './radio-list.component.html',
  styleUrls: ['./radio-list.component.scss']
})
export class RadioListComponent extends SelectListComponent {
}