小编Ser*_*nho的帖子

我正在将我的应用程序从angular2 RC5与angular-webpack脚手架迁移到角度2 2.0.0,角度为cli beta 14.

我正在与这些错误作斗争:

未捕获错误:无法解析PublicInfoDao的所有参数:(？,？).CompileMetadataResolver.getDependenciesMetadata @ metadata_resolver.js:508CompileMetadataResolver.getTypeMetadata @ metadata_resolver.js:405(匿名函数)@ metadata_resolver.js:552CompileMetadataResolver.getProvidersMetadata @ metadata_resolver. JS:532CompileMetadataResolver.getNgModuleMetadata @ metadata_resolver.js:285RuntimeCompiler._compileComponents @ runtime_compiler.js:126RuntimeCompiler._compileModuleAndComponents @ runtime_compiler.js:64RuntimeCompiler.compileModuleAsync @ runtime_compiler.js:55PlatformRef _._ bootstrapModuleWithZone @ application_ref.js:303PlatformRef_.bootstrapModule @ application_ref.js: 285(匿名函数)@main.ts:13__webpack_require__ @ bootstrap db3609d ...:52(匿名函数)@.*$:7__webpack_require__ @ bootstrap db3609d ...:52webpackJsonpCallback @ bootstrap db3609d ...:23(匿名函数)@main.bundle.js: 1

和

metadata_resolver.js:278Uncaught错误:模块'AppModule'(匿名函数)@ metadata_resolver.js声明的意外值'AppComponent':278CompileMetadataResolver.getNgModuleMetadata @ metadata_resolver.js:265RuntimeCompiler._compileComponents @ runtime_compiler.js:126RuntimeCompiler._compileModuleAndComponents @ runtime_compiler. js:64RuntimeCompiler.compileModuleAsync @ runtime_compiler.js:55PlatformRef _._ bootstrapModuleWithZone @ application_ref.js:303PlatformRef_.bootstrapModule @ application_ref.js:285(匿名函数)@main.ts:13__webpack_require__ @ bootstrap db3609d ...:52(匿名函数)@.*$:7__webpack_require__ @ bootstrap db3609d ...:52webpackJsonpCallback @ bootstrap db3609d ...:23(匿名函数)@main.bundle.js:1 1:https: //github.com/preboot/angular2-webpack …

有时我使用Mixins来注入重复的函数slugUrl().

但它不适用于angular 4编译器.

export function Mixin(decorators: Function[]) {
  return function (classFn: Function) {
    decorators.forEach(decorator => {
      Object.getOwnPropertyNames(decorator.prototype).forEach(name => {
        classFn.prototype[name] = decorator.prototype[name];
      });
    });
  };
}


@Mixin([BehaviorInjected])
export class FooComponent {

}

如果我编译此代码,编译器抛出:

属性'ngClassControl'在'FooComponent'类型上不存在.

有任何想法吗？

编辑:由于有人问,这是使用TS mixins再现问题的另一个例子,这次是在模板级别.

组件:

@Component({
    selector: 'home-page',
    template: '<test [tag]="tag"></test>'
})
export class HomePageComponent extends TaggedComponent(MyComponent) {
    public tag = 'hi there';
}

@Component({
    selector: 'test',
    template: '<div></div>'
})
export class TestComponent extends TaggedComponent(MyComponent) {}

混入:

type Constructor<T> = new(...args: any[]) => T;

export …

是否可以使用新的angular 4渲染器删除侦听器？

这是界面:

abstract listen(target: 'window' | 'document' | 'body' | any, eventName: string, callback: (event: any) => boolean | void): () => void;

在渲染器v1中,listen和listenGlobal返回一个Function,但是这个返回void.

这是一个问题吗？如果没有,我该如何删除监听器？

我的组件在其他 render() 中使用，例如

return (<MyElem>Some text here</MyElem>)

如何访问组件类中的“Some text here”字符串？

我正在使用Angular 2和angular-cli,我想添加srcdoc polyfill来支持Microsoft Edge.所以:

我添加到package.json https://github.com/jugglinmike/srcdoc-polyfill

我import 'srcdoc-polyfill/srcdoc-polyfill.min';在polyfills.ts中导入.

我用它像:

 <iframe class="ticket-frame" [srcdoc]="ticket.html | htmlSafe"
                  tlIframeAutoHeight>
 </iframe>

如果你问我iframeAutoHeight指令,这是代码:

@Directive({

  selector: '[tlIframeAutoHeight]'
})
export class IframeAutoHeightDirective {

  constructor(element: ElementRef, renderer: Renderer) {
    renderer.listen(element.nativeElement, 'load', () => {
      renderer.setElementStyle(
        element.nativeElement,
        'height',
        element.nativeElement.contentWindow.document.body.clientHeight + 'px'
      );
    });
  }
}

Microsoft Edge 35忽略了srcdoc属性,任何有关问题的想法是什么？

我也接受变通办法.

我正在尝试使用以下配置在bitbucket平台上运行测试:

image: node:6.8.0

pipelines:
  default:
    - step:
        script:
          - echo 'deb http://dl.google.com/linux/chrome/deb/ stable main' > /etc/apt/sources.list.d/chrome.list
          - wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
          - set -x && apt-get update && apt-get install -y xvfb google-chrome-stable
          - ln -sf /usr/bin/xvfb-chrome /usr/bin/google-chrome
          - npm --version
          - npm install
          - npm test

那是输出:

> ng test

Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
13 10 2016 15:26:57.937:WARN [karma]: No captured …

我在一个惰性模块中导入了一个 ng-bootstrap 模态库。

@NgModule({imports: [NgbModalModule]})

该库NgbModal在 root 中提供了一项服务。

@Injectable({providedIn: 'root'})
class NgbModal {...}

我将它注入到一个组件中。

constructor(private modal: NgbModal) {}

我开发了那个的类扩展。

export class CustomNgbModal extends NgbModal{...}

如何使用 CustomNgbModal 覆盖 NgbModal 类型？

使用模块将是

{provide: NgbModal, useClass: CustomNgbModal}

但是使用providedIn根元数据，没有线索。

那么，如何覆盖 root 中提供的模块？

我有以下组件:

<component value="3"></component>

组件代码是:

  private _value:number;

  get value(): number {
    return this._value;
  }

  @Input()
  set value(value: number) {
    console.log(value);
    console.log(typeof value);
    this._value = value;
  }

日志是:

3
string

但是,如果我绑定属性,如:

<component [value]="variable1"></component>

在这种情况下,如果variable1是类型编号,我会得到一个数字.

3
number

我知道打字稿没有魔力,但这是正确的行为吗？Angular Input装饰器应该进行转换吗？

我正在检查setter中的类型,但是当typescript正在编译时我会遇到错误.

我不想在gettes和setter中使用type any.

任何优雅的解决方

AsyncPipe与BehaviorSubject一起使用，但是我不想用空数据初始化我的服务，因此我使用Subject intead。

问题是NgFor和asyncPipe无法与Subject一起使用，这是一个问题吗？

这有效：

零件：

export class AppComponent {
  foo = new BehaviorSubject<Array<number>>([1,2,3]);

  getFoo(){
     return this.foo.asObservable();
  }
}

模板

<span *ngFor="let e of foo.asObservable() | async">{{e}}</span>

这不起作用：

零件

export class AppComponent {
  foo = new Subject<Array<number>>();

  constructor(){
     setTimeout(() => {
          this.foo.next([1,2,3]);
     }, 3000);
  }

  getFoo(){
     return this.foo.asObservable();
  }
}

模板

<span *ngFor="let e of foo.getFoo() | async">{{e}}</span>