相关疑难解决方法(0)

我正在编写一个具有属性的Angular组件Mode(): string.我希望能够以编程方式设置此属性,而不是响应任何事件.问题是在没有浏览器事件的情况下,模板绑定{{Mode}}不会更新.有没有办法手动触发此更改检测？

如何强制组件在Angular 2中重新渲染？出于调试目的,使用Redux我想强制组件重新渲染它的视图,这可能吗？

我已经开始探索Angular2(我将使用Angular1和一些React背景),我遇到了问题.

我想将某些击键绑定到组件中的操作,因此我决定使用Angular2生命周期来绑定/取消绑定操作.

但是,如果我在Mousetrap回调中执行某些操作,它会起作用,但它不会呈现,并且在运行摘要周期之前不会显示更改.

我是否需要显式运行某些内容来更新视图

有人可以帮我弄清楚发生了什么吗？任何帮助将非常感激.

import {Component} from 'angular2/core';
const Mousetrap = require('mousetrap');

@Component({
  template: `<div>
    Video template: Mode {{ mode }}
    <input type="number" [(ngModel)]="mode"/>
  </div>`
})
export class Video {

  public mode: number;

  constructor() {
    this.mode = 0;
  }

  ngOnInit() {

    console.log('hello Video component');
    Mousetrap.bind('d', () => console.log('this.mode=', this.mode));
    Mousetrap.bind('i', () => this.incrementMode()); // doesn't work

    this.incrementMode(); // works
    this.incrementMode(); // works
    setTimeout(() => this.incrementMode(), 4000); // works

  }

  incrementMode() {
    console.log('incMode', this.mode++);
  };

  ngOnDestroy() {
    console.log('bye bye Video …

尝试在窗口上渲染窗口大小,通过使用async管道的角度2组件中的流调整大小:

<h2>Size: {{size$ | async | json}}</h2>

const windowSize$ = new BehaviorSubject(getWindowSize());
Observable.fromEvent(window, 'resize')
  .map(getWindowSize)
  .subscribe(windowSize$);

function getWindowSize() {
  return {
    height: window.innerHeight,
    width: window.innerWidth
  };
}

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Size: {{size$ | async | json}}</h2>
    </div>
  `,
  directives: []
})
export class App {
  size$ = windowSize$.do(o => console.log('size:', o));
  constructor() {  }
}

但该组件仅呈现初始状态并忽略流更新.如果您打开控制台,在窗口调整大小时,您将看到来自同一个流的更新.

无法理解我在这里缺少什么.

这是一个吸烟者