1

我正在尝试通过编写自定义组件/指令来扩展/包装第三方（Angular Material 2）指令。

对于一个按钮，

<button type="button" md-button>Some Text</button>

我不会在我的应用程序的所有位置直接使用上述控件，而是将其包装在一个自定义组件中，并且我将在一个位置进行配置更改，它将影响使用自定义组件的所有其他位置。

import { MdButton } from '@angular/material';
import {
  AfterViewInit,
  ChangeDetectionStrategy,
  Component,
  ElementRef,
  OnInit,
  Renderer,
  ViewChild,
  ViewEncapsulation
} from '@angular/core';

@Component({
  selector: '[at-button]',
  template: `<ng-content></ng-content>`,
  styleUrls: []
})
export class AtButtonComponent extends MdButton implements OnInit, AfterViewInit {
  // @ViewChild(MdButton)
  // private mdButton:MdButton
  private eleRef: ElementRef;
  private renderRef: Renderer;

  constructor(_renderer: Renderer, _elementRef: ElementRef) {
    super(_elementRef, _renderer);

    this.eleRef = _elementRef;
    this.renderRef = _renderer;
  }

  ngOnInit() {
  }

  ngAfterViewInit(): void {

    this.disableRipple = true;
    this.color = 'warn';
    this.renderRef.setElementAttribute(this.eleRef.nativeElement, 'md-button', '');    
  }
}

在 AfterViewInit 钩子中，我正在尝试设置元素属性“md-button”，我成功了，但我需要编译以获得材料外观和完整。如何编译 ng-content 中的模板。你能指导我吗。

4

1 回答 1

0

Angular 在继承和组合方面非常有限。我相信在这种情况下包装MdButton是一种更好的方法：

@Component({
  selector: '[at-button]',
  template: `<button type="button" md-button><ng-content></ng-content></button>`,
  styleUrls: []
})


<div at-button>Click Me</div>

否则您将不得不提供原始模板、样式等...

于 2017-02-12T17:52:07.683 回答