Question

我有一个组件app-preview，它有一个推送组件，由它的父组件ng-content组成。

app-preview'父母的代码：

<app-preview>
      <checkbox #prv
        [indeterminate]="true"
        [checked]="true">
      </checkbox>
</app-preview>

我希望app-preview不仅要呈现，还要将字符串保存到任何属性中，将任何组件的模板保存到ng-content。所以我希望app-preview保存以下字符串：

  "<checkbox #prv
    [indeterminate]="true"
    [checked]="true">
  </checkbox>"

进入它的属性并在其.ts文件中使用它。例如：this.childTmpl

我怎样才能做到这一点？

感谢

Answer 1

我猜你正在使用print "sin(pi) = %.2f\ncos(pi/2) = %.2f" % (sin(pi), cos(pi/2))。

因此，在这种情况下，可以通过覆盖例如@angular/compiler方法轻松完成：

I18NHtmlParser.parse

它会在import { Attribute as HtmlAttribute, I18NHtmlParser } from '@angular/compiler'; function visitAll(visitor: any, nodes: any[]): any[] { const result: any[] = []; nodes.forEach(ast => ast.visit(visitor)); return result; } class MyVisitor { visitElement(ast: any) { if(ast.name === 'app-preview') { const text = ast.sourceSpan.start.file.content .substring(ast.startSourceSpan.end.offset, ast.endSourceSpan.start.offset); ast.attrs.push(new HtmlAttribute('childTmpl', text, ast.startSourceSpan)) } visitAll(this, ast.children); } visitAttribute() {} visitText() {} visitComment() {} } const originParse = I18NHtmlParser.prototype.parse; const visitor = new MyVisitor(); I18NHtmlParser.prototype.parse = function() { const result = originParse.apply(this, arguments); visitAll(visitor, result.rootNodes) return result; };代码之间收集文字，并将其传递给app-preview属性，该属性将转换为childTmpl。

之后，您可以在

中获取ContentChild字符串

应用-preview.component.ts

@Input

如果您想看到它的实际效果，请查看 Plunker Example

P.S。 如果您不知道它的作用，请不要这样做。

查看角度分析模板的外观

https://alexzuza.github.io/enjoy-ng-parser

Answer 2

尝试添加对应用预览的引用

<app-preview [title]="'PREVIEW'" [id]="'prev'" #test>
      <checkbox #prv
        [indeterminate]="true"
        [checked]="true">
      </checkbox>
</app-preview>

在您的.ts文件中，您可以接收原生元素的内部HTML并保存，如下所示：

@ViewChild('test') input:ElementRef; 

ngAfterViewInit() {
  console.log(this.input.nativeElement.innerHTML);
}

不要忘记导入ElementRef和ViewChild。

angular 2/4将ContentChild模板保存为字符串

2 个答案: