从 @Component Angular 2 更新绑定在 @Directive 的模板选择器中的数据

Question

我在 Angular 2 中查看了一个特定的东西，我需要使用即将发生的更改来更新指令的选择器的数据绑定变量。但是，它不会在每次更改时都更新。

@Component 模板中的@Directive 选择器，我们调用 comp.html

<sunburst-chart [className]="'sunburst-chart'" width="200" height="200" bind-data="costData">
    </sunburst-chart>

我的目标数据是“costData”

这是指令的样子，

import { Directive, ElementRef, Attribute, SimpleChange, Input, OnChanges, ViewChild } from '@angular/core';
import * as d3 from 'd3';

@Directive({
    selector: 'sunburst-chart'
})
export class SunburstChart {}

import {Component, OnInit, ViewEncapsulation} from '@angular/core';
import {AWSTotalCostService} from '../services/index';
import {Router} from '@angular/router';
import {CostPricingTileModel} from '../models/costpricingtile.model';


@Component({
  moduleId: module.id,
  selector: 'costing-module-tile',
  templateUrl: 'costpricingtile.html',
  providers: [AWSTotalCostService],
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['costpricingtile.scss'],
})
export class CostPricingTileComponent implements OnInit {
  private costData : any;

这会调用一个服务，返回数据，之后视图不会更新。

private sample () : any {
    this.sampleService.sampleFun()
        .subscribe(
            data => {

            this.costData = data

        },
            error =>  this.errorMessage = error
    );
  }

  ngOnInit () : void {
	  console.log('');
    this.sample();
  }

非常感谢任何帮助。

我面临的问题是，我无法更新对 html 中绑定数据的更改。

PS。使用最新版本的 Angular（稳定版，不是 beta 版）

添加更简单的术语，

说点简单的吧。我有一个 d3 图表，我使用选择器“sunburst-chart”创建了一个指令 (@Directive)。我有一个组件（@Component），其中包含一个 templateUrl '一个 html 文件'，它有这个选择器作为一个元素。我将该元素的数据指向组件的数据变量'say costData'。最初它工作正常，因为我有一些数据存在，当 costData 从服务中更改时，costData 会更新，但更改不会绑定回选择器。因此不会发生视图更改

Answer 1

您提到您使用的是最新的Angular。

@Component 装饰器中不再指定提供程序。相反，您应该将它们移至@NgModule

Angular 中有三个types of directives，而您的似乎不适合其中任何一个。

• 组件：带有模板的指令。选择器是一个html标签，比如你的sunburst-chart，但它必须使用@Component装饰器
• 一个属性指令。 Selector 是一个 html 属性；例如：[sunburst-chart]
• 结构指令，例如*ngIf，用于更改 DOM 的结构

如果您希望选择器是 HTML 标记，请使用组件而不是指令。