Angular8 依赖注入InjectionToken使用

最新推荐文章于 2024-10-29 14:50:24 发布

lvxinaidou

最新推荐文章于 2024-10-29 14:50:24 发布

阅读量1.8k

点赞数 3

分类专栏： Angular 文章标签： typescript javascript es6

本文链接：https://blog.csdn.net/lvxinaidou/article/details/105944806

版权

Angular 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

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