Question

我想创建具有Router和RouterModule之外的视图层次结构的组件

示例：

comp-parent.ts

@Component({
  selector: 'comp-parent',
  template: `
        <p>parent works</p>
        <router-outlet></router-outlet>
        `,
  styleUrls: ['./comp-parent.css']
  })
export class ComponentParent { 
    protected foo: string;
}

comp-children.ts

@Component({
  selector: 'comp-children',
  template: "<p>Children works</p>",
  styleUrls: ['./comp-children.css']
  })
export class ComponentChildren extends ComponentParent { }

component-foo-bar.ts

@Component({
  selector: 'component-foo-bar',
  template: "<comp-children></comp-children>",
  styleUrls: ['./component-bar.css']
  })
export class ComponentFooBar { }

在ComponentBar中，我希望comp-children将是comp-parent，其中包含comp-children，但是仅加载comp-children模板。

如何使用已解析为<router-outlet/>模板的comp-children加载父模板？

Answer 1

只需更换

@Component({
  selector: 'component-foo-bar',
  template: "<comp-children>",
  styleUrls: ['./component-bar.css']
  })
export class ComponentFooBar { }

使用

@Component({
  selector: 'component-foo-bar',
  template: "<comp-children></comp-children>",
  styleUrls: ['./component-bar.css']
  })
export class ComponentFooBar { }

Answer 2

继承类时，只能使用基类的逻辑，而不能使用其模板。

实际上，您尚未在父组件中使用子组件。（我的意思是在父组件模板中使用子组件选择器）

因此它们实际上不是父级和子级，它们只是基类和派生类

Answer 3

如果要建立这样的层次结构，则不需要使用router-outlet或继承。只需直接使用组件（通过选择器）即可。请参见StackBlitz演示。

具有扩展模板的组件子选择器

3 个答案: