Question

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

通过下面的示例，默认的 col-xs-4 类正按预期添加到组件中，但即使事件本身有效，click事件也不会更新类，如记录它会更新类中的列值。我似乎需要某种事件监听器来更新它，但我不知道如何处理它。

内容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>

内容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;
  }
}

然后在子组件中唯一的区别，就像你说的那样是这段代码片段

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

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

1 个答案: