角组件继承和继承订阅 [英] Angular component Inheritance and inheriting subscriptions

问题描述

下面是一个组件，我将在其他多个组件中进行扩展，以便重用一些代码.

Let below is a component which I will be extending in various other components ti reuse some code..

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: ` <div>
      <h1>{{appTitle}}</h1>
      <div>To Tutorials Point</div>
   </div> `,
})

export class AppComponent {
   appTitle: string = 'Welcome';
   ngOnInit(){
      this.registerSomeSubscriptions();
   }
   registerSomeSubscriptions(){
      this.subscribeSomething.subscribe((data)=>{
         performSomeAction();
      })
   }


}

我可以像下面这样扩展它

I can extend it like below

 import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: ` <div>
      <h1>{{appTitle}}</h1>
      <div>To Tutorials Point</div>
   </div> `,
})

export class ChildComponent extends AppComponent {
   
}

虽然我知道该组件的公共成员将在子组件中可用.

While I know that public members of the component will be available in the child component.

我的问题

1. 对于这两个组件，我仍然需要使用单独的html文件吗?还是某些代码风格或问题解决技术可以通过我不知道的某些技术来重用同一html模板以及针对特定孩子的实现. li>

1. Do I still have to use separate html files for both the components or is thier some of code style or problem solving technique to reuse the same html template along with some child specific implementation by some technique I am not aware of.

推荐答案

Child组件可以使用与父组件相同的html模板，也可以拥有自己的html文件，在这种情况下，父组件的html将不使用.

The Child components can either use the same html template as the parent Component or they can have their own html files, in which case the html of the parent component will not be used.

如果要在子组件中使用父组件的html并进行一些修改，则可以重用父组件而不是继承它.

If you want to use the parent component's html with some modification in the Child components you can reuse the parent component instead of inheriting it.

• 使您的父组件成为可重复使用的组件
• 在子/功能组件的模板中，使用其选择器添加父组件

    // add something specific to child/feature component here
    <app-reusable-component></app-reusable-component>
    // add something specific to child/feature component here

可重用组件的html以及在功能组件的html中添加的其他html都将可用.

The reusable component's html will be available along with the additional html that you add in the feature component's html.

• 使用可交互的组件-Input和Output在可重用组件和功能组件之间传递数据.

• to pass the data between the reusable component and the feature component use component interaction - Input and Output.

Input-通过输入绑定将数据从要素组件传递到可重用组件

Input - Pass data from feature component to reusable component with input binding

reusable-component.ts:
export class ReusableComponent implements OnInit {
   @Input() dataIn: Observable<object>;
   ngOnInit() {
     dataIn.subscribe(data => {
       // display data
     });
   }
}

feature-component.html:
...
<app-reusable-component [dataIn]="dataToDisplay$"></app-reusable-component>
...

feature-component.ts:
export class FeatureComponent implements OnInit {
  public dataToDisplay$: Observable<object>;
  ngOnInit() {
    this.dataToDisplay$ = this.http.get(url);
  }
}

• Output-将数据/事件从可重用组件发送到功能组件
• Output - Send data/events from reusable component to feature component

reusable-component.ts:
export class ReusableComponent implements OnInit {
   @Input() dataIn: Observable<object>;
   @Output() eventOut: EventEmitter<object> = new EventEmitter<object>();
   ngOnInit() {
     dataIn.subscribe(data => {
       // display data
     });
   }
   userInput(value) {
      this.eventOut.emit(value);
   }
}

feature-component.html:
...
<app-reusable-component [dataIn]="dataToDisplay$" (eventOut) ="handleUserData($event)"></app-reusable-component>
...

feature-component.ts:
export class FeatureComponent implements OnInit {
  public dataToDisplay$: Observable<object>;
  ngOnInit() {
    this.dataToDisplay$ = this.http.get(url);
  }
  handleUserData(value) {
    this.http.post(url, value);
  }
}

通过这种方法，您可以在所有子/功能组件中重复使用父组件的模板，并且可以在子/功能组件中添加其他html内容，并在它们之间传递数据.

In this approach you can reuse the template of the parent component in all your child/feature components, and you will be able add additional html content in your child/feature components and pass data between them.

这篇关于角组件继承和继承订阅的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！