单击从组件模板绑定以更新 HTML 类 Angular2

Question

我很难弄清楚如何将更新后的值从一个模板的点击绑定传递到另一个模板。本质上，我正在创建一个组件存储库应用程序，用户可以在其中查看组件并在页面上更新它的选项。这些选项大部分都可以在组件之间共享，因此我创建了单独的文件来存储这些常用选项。

在下面的示例中，默认的 col-xs-4 类正在按预期添加到组件中，但单击事件不会更新该类，即使事件本身有效，因为记录它会更新类中的列值。看来我需要某种事件监听器来更新它，但我不确定如何处理。

---

content-tout.html

<div class="row">
    <div [ng-class]="columnAmount" class="content-tout">
        Tout
    </div>
</div>

<hr />

<h2>Options</h2>
<p>Use the following buttons to update the values in the component above.</p>
<options></options>

content-tout.ts

import { Component, View, NgClass } from 'angular2/angular2';

// this is option for changing column class from the ng-class in the template
import { ColumnsOption } from '../../shared/options/columns';


@Component ({
    selector: 'contentPlaceholder',
    bindings: [ColumnsOption]
})

@View ({
    templateUrl: '/app/components/content-tout/content-tout.html',
    directives: [ColumnsOption, NgClass]
})


export class ContentTout {
    private columnAmount: string;

    constructor(private columnsOption:ColumnsOption) {
        this.columnAmount = this.columnsOption.columns;
    }
}

columns.ts

import { Component, View, NgFor } from 'angular2/angular2';

@Component ({
    selector: 'options'
})

@View ({
    template: `
        <hr />
        <h3>Columns / Width</h3>
        <nav>
            <button *ng-for="#column of columnsCollection" (click)="changeColumns(column)" class="btn btn-primary-outline" type="button">
                {{ column }}
            </button>
        </nav>
    `,
    directives: [ NgFor ]
})


export class ColumnsOption {

    private columnsCollection: Array<string> = [
        'col-xs-1', 'col-xs-2', 'col-xs-3', 'col-xs-4', 'col-xs-5', 'col-xs-6', 'col-xs-7', 'col-xs-8', 'col-xs-9', 'col-xs-10', 'col-xs-11', 'col-xs-12'
    ];
    public columns: string = "col-xs-4";


    private changeColumns(column: string) {
        this.columns = column;
    }
}

---

我在 Angular2 中使用单击绑定进行了很多搜索，并且只遇到了示例与绑定在同一视图中的资源。我希望这种模块化方法是可能的，所以如果有人有任何资源可供我阅读，或者 API 预览中的特定显示，我将非常感激。

Answer 1

就像你说的，我评论中的例子并没有什么不同。我只是使用@Host() 来获取对子组件中父组件的引用。

这是父类，我们只添加一个方法，将修改它自己的column 属性，该属性将由具有相同名称的子类方法调用（为方便起见，您可以随意调用它）

@Component({
  template : `
     <div [class]="columns">{{columns}}</div>
     <columns></columns>
  `,
  directives : [Columns]
})
export class App {
  columns = "col-xs-4";
  changeColumn(column) {
    this.columns = column;
  }
}

那么在子组件中唯一的区别，就像你说的，就是这段代码sn-p

constructor(@Host() @Inject(forwardRef(() => App)) app: App) {
    this.app = app;
}

changeColumns(column) {
    this.app.changeColumn(column);
}

在构造函数中保存对父组件的引用，然后在子方法changeColumns 中调用父方法changeColumns。

现在，您可能在问Inject [1] 和 forwardRef [2] 到底是什么，我为什么需要它们？。答案很简单：子组件不知道它的父组件（App），因为它在调用它时并不存在。因此，我们需要它们获取对 存在的类的引用。 [3]

但也许你想避免使用它们，如何？更改类的顺序。看这个小例子

(Child calls Parent but it doesn't exist yet = Fail)
class Child  {}
class Parent {}

// So move parent to be above of its Child
class Parent {}
class Child {}

在后一种情况下，您可以通过调用父级来节省一些击键，如下所示

constructor(@Host() app: App) {
    this.app = app;
}

在示例中添加 plnkr 作为答案的一部分：example plnkr

我希望我已经足够清楚了:)

参考

[1]Documentation for @Inject()

[2]Documentation for forwardRef

[3]Classes in javascript aren't hoisted