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

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 { }

组件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演示。