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

确认-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-content但发现它不合适。

通过传递纯HTML成功，但它会导致绑定问题[除了是一种处理这种情况的无法处理方式]。

Answer 1

我认为使用ng-content的模板可以解决这个问题：

<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 2

Ng-content不支持从父级到子级的数据绑定。您可以使用ng-template在不继承父组件和支持数据绑定的情况下执行此操作。 Here示例：

<强> 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 3

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

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

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

你可以在Angular（5-6）[TypeScript]中使用继承扩展HTML代码吗？

3 个答案: