代码之家 › 专栏 › 技术社区 › Efim Rozovsky

您能以角度(5-6)扩展继承的HTML代码吗[typescript]

oop typescript angular

Efim Rozovsky · 技术社区 · 6 年前

我有个想法,有一个confrimmodal组件,它扩展了常规模式。

从代码的角度看,它非常有效,因为我可以在模式中编写所有基本代码(typescript),然后只需向confirmmodal添加特定的内容即可完成。

我能用HTML做一些类似的事情吗?那就是有一个基本的信封(它是从模态继承的,然后我用另一个模板在里面添加所有我需要的东西)?

模态组件.ts

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

export abstract class ModalComponent{
      protected modalService: BsModalService;

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

确认-模态组件.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获得成功,但它会导致绑定出现问题(除了作为处理这种情况的一种非常规方法)。

3 回复 | 直到 6 年前

Abylay 6 年前

ng内容不支持从父级到子级的数据绑定。您可以在不继承父组件和支持数据绑定的情况下使用 ng-template Here

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

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

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

@Input() data: any[];

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

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

Carnaru Valentin 6 年前

我认为一个包含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>