Question

所以在Angular2中，以下内容非常简单：

@Component({
  selector: 'some',
  properties: ['header']
})
@View({
  template: `
    <div>
      <h2>{{ getFormattedHeader() }}</h2>
      <p><content></content></p>
    </div>
  `
})
class SomeComponent {
  header: string;

  getFormattedHeader() {
    return this.header + '!';
  }
}

<some header="Header Text">Content</some>

你明白了：

<div>
  <h2>Header Text!</h2>
  <p>Content</p>
</div>

但是如果我想对内容应用格式呢？我可以编写getFormattedContent()函数，如果是，我该用{<1}}替换什么？

就此而言，我本可以选择在模板中使用this.header，使用format(header)方法获取字符串并使用format返回该字符串。我可以在模板中添加类似! format( <content></content>的内容吗？显然我的)方法需要稍微复杂一点，因为format不是字符串，但只要我知道它的类型（<content></content>？{{ 1}}？）。

显然，有一种解决方法只需将属性中的所有东西都推出并将内容留空，但我发现它很难看（特别是因为人们无法明确定义不需要关闭的标签）。

Answer 1

适用于 Angular 2.0.0-alpha.45

如果您对子元素，即指令或变量绑定感兴趣，那么这将起作用：

从'angular2 / angular2'导入{Component，Query QueryList};

@Component({
    selector: 'c-item',
    template: '<li><ng-content></ng-content></li>'
})
export class CItem {
}


@Component({
    selector: 'c-container',
    template: '<div><ul><ng-content></ng-content></ul><strong>{{children.length}} items found.</strong></div>',
    directives: [CItem]
})
export class CContainer {
    private children:QueryList<CItem>;

    constructor(@Query(CItem) children:QueryList<CItem>) {
            this.children = children;
    }

    afterContentInit() {
            // now this.children variable is initialized properly
    }
}

Answer 2

适用于 Angular 2.0.0-alpha.45

您可以考虑一个指令，它允许您访问HTMLElement及其子节点。考虑一个例子：

import {Directive, CORE_DIRECTIVES, ElementRef, HTMLElement} from 'angular2/angular2';


@Directive({
    selector: '[my-border]',
    inputs: [
    'definition : my-border' // attribute my-border to var definition
    ]
})
export class MyBorder {
    private definition:string;
    private elementRef : ElementRef;

    constructor(elementRef : ElementRef) {
        this.elementRef = elementRef;
    }

    afterContentInit() {
        // now this.children variable is initialized properly
        let htmlEl:HTMLElement = this.elementRef.nativeElement;
        htmlEl.setAttribute('style', 'border:' + this.definition);
    }

然后您可以按如下方式使用它：

<span my-border="dashed #00b3ee thin;">This has directive my-border</span>

afterContentInit 中的 htmlEl 是指 span DOM元素。结果你得到：

<span my-border="dashed #00b3ee thin;" style="border:dashed #00b3ee thin;">This has directive my-border</span>

班级本身可以看到被抄涵的内容吗？

2 个答案: