Question

我已经构建了一个组件

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-g-switch',
  template: `
    <div id="switch" (click)='toggle()' [ngStyle]="{'background-image': 'url('+photo+')'}"></div>
  `,
  styleUrls: ['./g-switch.component.scss']
})
export class GSwitchComponent implements OnInit {

  _value: number;
  photo = '../../assets/sw-1-1.png';

  constructor() { }

  ngOnInit() {
    // this._value = 1;
  }

  public returnValue(): number {
    return this._value;
  }

  toggle() {
    this._value++;
    if (this._value === 4) {
      this._value = 1;
    }
    this.photo = '../../assets/sw-1-' + this._value + '.png';
  }

}

我将

包含在我的模板中

<app-g-switch #sw1></app-g-switch>

我希望能够将值传递给组件，我之前已经看过这样做了，

<app-g-switch #sw1 [value]="2"></app-g-switch>

如何实现这一目标？我试图实现一个setter但它没有用。

Answer 1

Angular文档在模板和数据绑定文档下有一个子部分，该文档描述了您正在寻找的import * as React from 'react'; import * as ReactDOM from 'react-dom'; import {AppContainer} from 'react-hot-loader'; import {observable} from 'mobx'; import {Provider} from 'mobx-react'; import {AppStore, UiStore, Stores} from './types/index'; import App from './components/App'; import './index.css'; declare var stores:Stores; (window as any).stores = (window as any).stores || new Stores(new UiStore(), new AppStore()); function render() { ReactDOM.render( <AppContainer> <App {...stores} /> </AppContainer>, document.getElementById('root')); } const hot = (module as any).hot if (hot) hot.accept(() => { render(); }) render();和@Input模板语法。

请参阅Angular关于Input and output properties的文档。

实施例

在您的方案中，您希望能够从组件选择器上的HTML指令初始化@Output变量。

使用@Input装饰器标记_value以将其声明为输入指令字段。

_value

现在，您可以从组件选择器设置@Input _value: number;参数，如下所示，

_value

角度2中自定义html标签的自定义属性

1 个答案:

实施例