您能用角(5-6)[TypeScript]扩展具有继承的HTML代码吗？

Question

我有这样的想法，在我的脑海里，有一个ConfrimModal组件，它扩展了常规模式。

代码智能非常高效，因为我可以在模式中编写所有基本代码(TypeScript)，然后将特定的内容添加到ConfirmModal以完成。

我是否可以对HTML做一些类似的事情，即有一个基本的信封(它是从Modal继承的，然后我使用另一个模板在里面添加我需要的所有东西)？

modal.component.ts

@Component({
    selector: 'app-modal',
    template: '<section></section>'})

export abstract class ModalComponent{
      protected modalService: BsModalService;

      protected constructor(receivedModalService: BsModalService) {
        this.modalService = receivedModalService;
      }
}

confirm-modal.component.ts

@Component({   
    selector: 'app-confirm-modal',
    template: '<div>Hi its a test</div>',
    styleUrls: ['./confirm-modal.component.css'] })

export class ConfirmModalComponent extends ModalComponent implements OnInit {

  constructor(protected modalService: BsModalService) {
    super(modalService);   }

  ngOnInit() {   }

}

我希望最终的结果是

<section><div>Hi its a test</div></section>

通过在OOP的精神中使用一些东西。

我试过使用ng内容，但发现这是不合适的。

通过传递普通的HTML获得成功，但是它除了作为一种处理情况的unAngulary方法之外，还会给绑定带来问题。

Answer 1

Ng-内容不支持从父到子之间的数据绑定。您可以使用ng-template在不继承父组件和支持数据绑定的情况下完成此操作。这里示例：

parent.component.html

<section>
    <ng-template [ngTemplateOutletContext]='{data: data}' [ngTemplateOutlet]="templateVariable"></ng-template>
</section>

parent.component.ts

@Input() data: any[];
@ContentChild(TemplateRef) templateVariable: TemplateRef<any>;

child.component.html

<ul>
    <li *ngFor="let item of data">{{item}}</li>
</ul>

child.component.ts

@Input() data: any[];

app.component.html

<app-parent [data]="items">
   <ng-template let-data="data">
       <!-- Here can be any component -->
       <app-child [data]="data"></app-child>  
   </ng-template>
</app-parent>

app.component.ts

items = ['One', 'Two', 'Three', 'Four'];

Answer 2

我认为一个带有ng内容的模板可以解决这个问题：

<div class="card card-block">
  <h4 class="card-title">
    <ng-content select=".setup"></ng-content> 
  </h4>
  <p class="card-text"
     [hidden]="data.hide">
    <ng-content select=".punchline"></ng-content> 
  </p>
  <a class="btn btn-primary"
     (click)="data.toggle()">Tell Me
  </a>
</div>

Answer 3

HTML是一种标记语言。它在HTML标记中封装或“标记”数据，这些标记定义数据并在网页上描述其用途。然后，web浏览器读取HTML，告诉它哪些部分是标题，哪些部分是段落，哪些部分是链接，等等。HTML将数据描述给浏览器，然后浏览器相应地显示数据。

所以你不能像对待其他语言一样对待它

参考资料：https://ischool.syr.edu/infospace/2012/04/05/why-html-is-not-a-programming-language/