Angular8 依赖注入InjectionToken使用

Angular8 依赖注入InjectionToken使用

1.数据结构（models文件下）

models/column-details.model.ts

export interface Column {columnId:string;columnName: string;width: number
}

或者

export class Column {columnId:string;columnName: string;width: number
}

2.配置（config文件下）

config/column.token.ts

import { InjectionToken } from '@angular/core';
import { Column } from 'src/app/models/column-details.model';export const COLUMN_TOKEN = new InjectionToken<Column[]>('column.config');

3.常量 （constants文件下）

constants/column.constant.ts

import { Column } from '../models/column-details.model';export const COLUMN:Array<Column> = [{columnId: 'aeId',columnName: 'AE ID',width: 10},{columnId: 'aeName',columnName: 'AE Name',width: 10},{columnId: 'aeStatus',columnName: 'AE Status',width: 8},{columnId: 'geographyName',columnName: 'Geography',width: 10},{columnId: 'aeBusinessName',columnName: 'Business',width: 12},{columnId: 'reviewNumber',columnName: 'CA Review Coverage',width: 10},{columnId: 'assessmentId',columnName: 'Assessment ID',width: 10},{columnId: 'assessmentDate',columnName: 'Assessment Rating Date',width: 10},{columnId: 'overallResidualRating',columnName: 'Overall Residual Rating',width: 10},{columnId: 'selectedRiskTaxonomy',columnName: 'Risk Taxonomy by Level',width: 10},{columnId: 'selectedRiskTaxonomyRating',columnName: 'Selected Risk Taxonomy Rating',width: 10}
];

4.组件引用 （component)

component/execution-compliance/execution-conpliance.component.ts

import { Component, OnInit, Inject } from '@angular/core';
import { COLUMN } from 'src/app/constants/column.constant';
import { COLUMN_TOKEN } from '../config/column.token';
import { Column } from 'src/app/models/column-details.model';
import { ExecutonsDetailsService } from 'src/app/services/executons-details.service';@Component({selector: 'app-executon-compliance',templateUrl: './executon-compliance.component.html',styleUrls: ['./executon-compliance.component.css'],providers: [{provide: COLUMN_TOKEN, useValue:COLUMN}]
})
export class ExecutonComplianceComponent implements OnInit {constructor(@Inject(COLUMN_TOKEN) public columns:Column[],private executonsDetailsService: ExecutonsDetailsService,) {}ngOnInit(): void {console.log(this.columns);}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！