根据我们在angular2中的选择创建组件（及其内容）

Question

由于我的项目架构，这只是一个奇怪的问题。

在我的项目中，每当我创建新组件时，都会重复一些代码。 下面只是一个演示，重复了几行代码，我需要复制并粘贴这些代码以保证项目的一致性。

是否有任何方法/方法可用于在创建组件时决定组件content的{​​{1}}？

欢迎任何想法或方法或解决方案。

例如： -

abc.component.ts

.ts/html

abc.component.html

    title: 'billy';
    width: 500;
    height:600;
    ,
    ,
    ,
    ngOnInit(){
     try {
      this.gridId = this.injector.get('chartData')[0]['gridId'];
      this.gridWidth = this.injector.get('chartData')[0]['gridWidth'];
      this.gridHeight = this.injector.get('chartData')[0]['gridHeight'];
      this.data = this.injector.get('chartData')[0]['data'];
      this.gridStatus = true;
    } catch (e) {
      console.info('Not Gridster :: ' + e.status);
    }

    if (this.data) {
      this.buildChart(this.data);
    }
    // For Default Data from json
    else {
      try {
        let self = this;
        this.jsonDataService.getChartDefaultData().subscribe(
          function (success) {
            self.data = success;
            self.buildChart(success);
          },
          error => console.log('Getting Server Data Error :: ' + JSON.stringify(error)));
      } catch (e) { console.error('Error :: ' + JSON.stringify(e)); }
    }
    }
  buildChart(jsonData) {
this.title = jsonData['meta']['title'];
    this.chartId = jsonData['meta']['chartId'];
    this.width = jsonData['meta']['width'];
    this.height = jsonData['meta']['height'];
    this.viewbys = jsonData['meta']['viewBys'];
    this.viewIds = jsonData['meta']['viewIds'];
    this.measures = jsonData['meta']['meassures'];
    this.drillDown = jsonData['meta']['drillDown'];
    this.drillAcross = jsonData['meta']['drillAcross'];
    this.theme = jsonData['meta']['theme'];
    let showLegend = jsonData['meta']['displayLegends'];
    let showLabels = jsonData['meta']['displayLabels'];

}

bcd.component.ts

<div class='unifrom'>_
_
_
</div>

bcd.component.html

    title: 'billy';
    width: 500;
    height:600;
    ,
    ,
    ,
    ngOnInit(){
     try {
      this.gridId = this.injector.get('chartData')[0]['gridId'];
      this.gridWidth = this.injector.get('chartData')[0]['gridWidth'];
      this.gridHeight = this.injector.get('chartData')[0]['gridHeight'];
      this.data = this.injector.get('chartData')[0]['data'];
      this.gridStatus = true;
    } catch (e) {
      console.info('Not Gridster :: ' + e.status);
    }

    if (this.data) {
      this.buildChart(this.data);
    }
    // For Default Data from json
    else {
      try {
        let self = this;
        this.jsonDataService.getChartDefaultData().subscribe(
          function (success) {
            self.data = success;
            self.buildChart(success);
          },
          error => console.log('Getting Server Data Error :: ' + JSON.stringify(error)));
      } catch (e) { console.error('Error :: ' + JSON.stringify(e)); }
    }
    }
  buildChart(jsonData) {
this.title = jsonData['meta']['title'];
    this.chartId = jsonData['meta']['chartId'];
    this.width = jsonData['meta']['width'];
    this.height = jsonData['meta']['height'];
    this.viewbys = jsonData['meta']['viewBys'];
    this.viewIds = jsonData['meta']['viewIds'];
    this.measures = jsonData['meta']['meassures'];
    this.drillDown = jsonData['meta']['drillDown'];
    this.drillAcross = jsonData['meta']['drillAcross'];
    this.theme = jsonData['meta']['theme'];
    let showLegend = jsonData['meta']['displayLegends'];
    let showLabels = jsonData['meta']['displayLabels'];

}

cde.component.ts

<div class='unifrom'>_
_
_
</div>

cde.component.html

    title: 'billy';
    width: 500;
    height:600;
    ,
    ,
    ,
    ngOnInit(){
     try {
      this.gridId = this.injector.get('chartData')[0]['gridId'];
      this.gridWidth = this.injector.get('chartData')[0]['gridWidth'];
      this.gridHeight = this.injector.get('chartData')[0]['gridHeight'];
      this.data = this.injector.get('chartData')[0]['data'];
      this.gridStatus = true;
    } catch (e) {
      console.info('Not Gridster :: ' + e.status);
    }

    if (this.data) {
      this.buildChart(this.data);
    }
    // For Default Data from json
    else {
      try {
        let self = this;
        this.jsonDataService.getChartDefaultData().subscribe(
          function (success) {
            self.data = success;
            self.buildChart(success);
          },
          error => console.log('Getting Server Data Error :: ' + JSON.stringify(error)));
      } catch (e) { console.error('Error :: ' + JSON.stringify(e)); }
    }
    }
  buildChart(jsonData) {
this.title = jsonData['meta']['title'];
    this.chartId = jsonData['meta']['chartId'];
    this.width = jsonData['meta']['width'];
    this.height = jsonData['meta']['height'];
    this.viewbys = jsonData['meta']['viewBys'];
    this.viewIds = jsonData['meta']['viewIds'];
    this.measures = jsonData['meta']['meassures'];
    this.drillDown = jsonData['meta']['drillDown'];
    this.drillAcross = jsonData['meta']['drillAcross'];
    this.theme = jsonData['meta']['theme'];
    let showLegend = jsonData['meta']['displayLegends'];
    let showLabels = jsonData['meta']['displayLabels'];

}

Answer 1

创建服务[6, 4, 2]

brigdeService

在您的组件中，通过在构造函数

中初始化来访问它

export class BridgeService{
   public weight = 0;
   public height = 0;
   public title = '';


}

例如。创建一个服务来获取所有视图中的所有通知只需创建类 它在所有组件中初始化并直接在视图中调用。

Answer 2

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

@Component({
    template:'<div></div>'
})
export class BaseComponent<T> implements OnInit  {  //<--optional <T>
   //Your public variables
    variable1:string="Hello";
    ngOnInit(){
      //your code
    }
    commonFunction1(){}
    commonFunction2(data:T){} //<--function require argument typeof T
    commonFunction2():T  //<--function return T
    {
       data:T
       return data;
    }

//其他组件

interface Idata
{
}
export class AbcComponent extends BaseComponent<Idata>  {
@Component({
 templateUrl: './Abc.component.html'})
 export class AbcComponent  {
   constructor()
   {
     super();
   }
   variablel1:string="Good By";
   commonFunction1(){
        //This override the function1 of base
   }
}