Question

我正在尝试创建一个父类（Event）来处理四个孩子的DOM（投票事件，观看事件，我的事件，我的投票）。

这个想法是只有一个HTML，一个父Compoment和4个子组件，它们将覆盖一些父方法。这是典型的多态性案例。

无论如何，我有一个父组件：

@Component({
  selector: 'app-events',
  templateUrl: './events.component.html',
  styleUrls: ['./events.component.css']
})

export abstract class EventsComponent implements OnInit{
    constructor() {};
    ngOnInit() {
        this.test();
    }
    abstract test();
}

父HTML：

<div id="main">
<div class="container pad-top">
  <div class="row">
    <div class="col-xs-12 nopadding text-center">
      <a [routerLink]="['/events/vote-events']"><img class="img-responsive sin-looks-votacion"
                                                     src="assets/images/no-tienes-votaciones.jpg"></a>
    </div>
  </div>
</div>

我想做的事情如下：

子组件：

export class MyVotesComponent extends EventsComponent {

    private potato;

    constructor() {
      super();
    }

    test() {
      console.log("Testttttttttttt");
    }
}

儿童HTML：

<app-events></app-events>

问题是，我必须从events.module.ts声明中删除EventsComponent。现在浏览器会抛出：

'app-events' is not a known element:

最后一个问题是：这是最好的方法吗？如果没有，会是什么？我应该读什么？如果它确实是最好的方法，我错过了什么？

提前致谢。

一切顺利，

亚历

Answer 1

我认为您必须在每个子类的templateUrl装饰器上复制styleUrls和@Component。但至少你可以把文件放在一个地方：

@Component({
  selector: 'my-votes',
  templateUrl: './events.component.html',
  styleUrls: ['./events.component.css']
})
export class MyVotesComponent extends EventsComponent {

    private potato;

    constructor() {
      super();
    }

    test() {
      console.log("Testttttttttttt");
    }
}

您可能希望从抽象基类中删除@Component装饰器。

从父级继承选择器

1 个答案: