我有一个带有一个html和.ts文件的组件。出于某些原因,我必须创建多个页面(HTML)页面
是否可以为单个类(组件)创建多个(html)页面?
或者是否可以向组件提供动态TemplateUrl?
我的主要动机是提供不同的URL并使用不同的视图(HTML页面),但使用单一类(.ts类,即组件)?
我已经看到下面提到的许多问题与此有关,但无法找到确切的解决方案 -
我想要这样的东西
{ path: '/Login', component: LogIn, name: "Login"},
{ path: '/Login2', component: LogIn, name: "Login" },
{ path: '/Login3', component: LogIn, name: "Login" }
我想用不同的网址加载相同的组件并查看。
答案 0 :(得分:6)
这可以通过继承来实现。不同的视图和样式模板,但(基本上)相同的底层组件代码。您仍然需要声明@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 {
}
答案 1 :(得分:2)
Angular最佳实践是一个组件包含一个模板。 如果要将相同的逻辑应用于两个视图,则应在服务中创建该逻辑,并将一个服务用于两个不同的组件视图集。 URL是一个不同的问题,由路由器处理。您应该将组件A分配给URL A,将组件B分配给URL B.