Question

我正在寻找Angular 2中的特定内容，我需要使用即将发生的更改来更新指令的选择器数据绑定变量。但是，每次更改都没有更新。

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

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

我定位的数据是＆＃39; costData ＆＃39;

这是指令的样子，

＆＃13;

import { Directive, ElementRef, Attribute, SimpleChange, Input, OnChanges, ViewChild } from '@angular/core';
import * as d3 from 'd3';

@Directive({
    selector: 'sunburst-chart'
})
export class SunburstChart {}

＆＃13;

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;

＆＃13;

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

＆＃13;

private sample () : any {
    this.sampleService.sampleFun()
        .subscribe(
            data => {

            this.costData = data

        },
            error =>  this.errorMessage = error
    );
  }

  ngOnInit () : void {
	  console.log('');
    this.sample();
  }

＆＃13;

非常感谢任何帮助。

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

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

添加更简单的术语，

让我们谈谈简单。我有一个d3图表，我已经创建了一个带有选择器＆＃39; sunburst-chart＆＃39;的指令（@Directive）。我有一个组件（@Component），其中包含templateUrl＆＃39; html文件＆＃39;，它将此选择器作为元素。我将该元素的数据指向组件的数据变量＆quot; costData＆＃39;。最初它工作正常，因为我有一些数据存在，当costData从服务更改时，costData得到更新，但更改没有绑定回选择器。因此，观点变化不会发生

Answer 1

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

@Component装饰器中不再指定提供者。相反，你应该将它们移到@NgModule

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

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

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

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

1 个答案: