Angular 2 - 如何在模板中将 "checked" 属性传递给子项？

Question

我有一个自定义指令 <foo checked></foo>。在 foo 的模板中，我有 <input type="checkbox">。如果 checked 在 foo 上，我想要 <input type="checkbox" checked>。我还没有看到如何处理这些没有值的属性、检测它们并在它们存在时用它们标记子元素。

感谢您提供帮助。

Answer 1

尝试以下操作：

这里还有一个笨蛋：https://plnkr.co/edit/1JTijgHGvIGYMpDYC2i8?p=preview

import {Component,Attribute} from 'angular2/core'

@Component({
  selector: 'child',
  providers: [],
  template: `
    <div>
      <input type="checkbox" [checked]="isChecked">
    </div>
  `,
  directives: []
})
export class Child { 
  isChecked;
  constructor(@Attribute("checked") checked) {
    this.isChecked = !(checked === null);
  }
}

@Component({
  selector: 'my-app', 
  providers: [],
  template: `
    <div>
      <child checked></child>
      <child></child>
    </div>
  `,
  directives: [Child]
})
export class App {
}

Answer 2

我认为根据您的要求，在您的指令构造函数中您可以：-

Foo 指令 -

import {Directive, Attribute} from 'angular2/core';
@Directive({
    selector:   'foo'
})
export class foo {
     constructor(@Attribute('checked') checked: string) {
            if (checked === null){
              //checked is not present
            }else{
              //checked is present
            }
...
    }
....
}

并且，您可以使用 -

<foo checked></foo>

Angular 2 - 如何在模板中将 "checked" 属性传递给子项？

Angular 2 - How to pass "checked" attribute to child in template?

angular2-directives

angular2-template

angular