小编Dav*_*vid的帖子

我有一个父组件,它包含一个子组件列表.这些孩子是动态创建的,可以是任何类型.

所以,我正在做的是ng-container在父组件中使用as主机,创建子组件,ComponentFactoryResolver然后使用```(component.instance as any)更新子组件中的一些属性.id = host.id;` ```

这是父组件的代码(它是一个包含一些行的表):

<tr class="table-collapse__item" [class.active]="company === selected">
  <td [attr.colspan]="getItemColspan()">
    <ng-container host [id]="name" [selected]="isSelected"></ng-container>
  </td>
</tr>

host 是一个指令

@Directive({
  selector: '[host]'
})
export class Host implements OnChanges {
  @Input() id: any;
  @Input() selected: boolean;
  constructor(public viewRef: ViewContainerRef) {}
}

最后是如何创建组件和更新属性

@ViewChildren(Host) hosts: QueryList<Host>;

  constructor(private resolver: ComponentFactoryResolver,
              private cd: ChangeDetectorRef) {}

  ngAfterViewInit() {
    if (this.hosts) {
      const componentFactory = this.resolver.resolveComponentFactory(this.inner);
      this.hosts.forEach((host: Host) => {
        const component = host.viewRef.createComponent(componentFactory);
        (component.instance as any).id = …

我习惯在Angular HTML模板中使用带有"as"的异步管道,以避免复制可观察的订阅,如下所示:

<component *ngIf="(selected$ | async) as selected"></component>

那么我可以在模板中的任何其他地方使用"选中".

但是如果我尝试像这样使用它,在输入中:

<component [param]="(selected$ | async) as selected"></component>

我收到一个错误:

Unexpected token 'as' at column 21 in [categories$ | async as categories]

知道为什么吗？谢谢!

可能是一个愚蠢的问题,但无法轻易找到答案.

在Angular应用程序中,我使用Rxjs进行http调用以获取并将数据发布到后端.假设我有一个服务MyService,其方法如下:

getData() {
  this.http
      .get("mybackendurl/mydata")
      .map(res => res.json())
      .subscribe(data => this.data = data);
}

所以,假设我在几个地方使用这种方法,每次我导航到一个页面.不管做这种方式的便利性,我的问题是,这不像一个承诺,启动和完成,据我所知,这保持开放的连接,直到源终止,所以我需要以某种方式从这个退订每次我完成请求？

由于订阅是在服务中而不是在组件中完成的,因此服务不会被销毁,因此我担心我可能会创建多个订阅和连接而不是重用相同的订阅和连接.

谢谢!

我被困(可能是一些愚蠢的错误)试图用画布制作一个指令.

当我执行我的代码时,我得到一个element.getContext is not a function看起来很奇怪,因为我的元素实际上是一个HTMLCanvasElement.

这是我的指示

.directive('pitchCanvas', function() {

    function link(scope, element, attrs) {
        console.info('element: ' + element);
        var ctx = element.getContext('2d');
        ctx.font = "30px Arial";
        ctx.fillText("Hello World", 10, 50);
    }

  return {
    restrict: 'E',
    replace: true,
    scope: true,
    link: link,
    template: '<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"></canvas>'
  };
})

这是一个小提琴,我放置了我的代码的简化版本,无法工作.

任何帮助将非常感激.

我基本上想实现一个可观察的池消费者。

因此，服务会发出 http 调用来检索多个结果，然后组件会逐一使用这些结果。\n当服务检测到结果用完时，它将再次调用服务器以获取多个结果。新的结果。

我开始尝试每次进行单个 http 调用并订阅和取消订阅，但它看起来相当混乱和令人困惑。

我想要这样的东西：

this.http\n  .post(API, postData)\n  .map((response: Response) => response.json())\n  .subscribe(data => this.saveData(data))\n  .repeat(when_certain_condition)\n

有什么办法可以实现这一点吗？我读到了有关重复的内容，但似乎您需要提供要重复的值，因此 \xc2\xb4t 似乎不是可行的方法。

有什么想法吗？\n谢谢

我有一个使用webpack配置的Angular(2)应用程序,它从另一个公共存储库导入模块.

因此,公共存储库有一个common.module.ts文件,其中包含以下内容:

@NgModule({
  imports: [...],
  declarations: [...],
  providers: [...],
  exports: [...]
})
export class CommonModule {}

然后在我的主应用程序中,我在我的app.module.ts中导入它

@NgModule({
  imports: [
    ...
    CommonModule,
  ],
  declarations: [...],
  providers: [...],
  bootstrap: [AppComponent]
})
export class AppModule { }

这在Angular2中工作得很好,但后来我尝试在我的主项目中迁移到Angular 4.0(没有触及公共存储库,因为它也被其他未迁移的存储库使用).所以我在我的package.json中更改我的版本并重建,一切似乎都很好,但是当我在浏览器中加载应用程序时,我得到了这个

未捕获错误:模块"AppModule"导入的意外值"CommonModule".请添加@NgModule注释.

谁知道发生了什么事？已经使用@NgModule声明了CommonModule.我检查了node_modules以防导入的文件出现问题,并找到了包含的common_module.d.ts

...
export declare class CommonModule {}

但对我来说很好,这是桶文件和装饰器已从这里删除.

有任何想法吗？

有没有办法从参考中获取Angular中的组件名称？

所以,有这样的事情:

@Input comp: any;

ngOnInit {
  console.log(this.comp);
}

将记录整个组件对象,但我只想要一个带有组件名称的字符串.

那可能吗？谢谢

我正试图在我的应用程序中使用ngrx解析,并且由于某种原因它无法正常工作.

这是我之前使用解析路径中的简单服务获得它的方式:

resolve() {
  return this.service
    .getData()
    .map(data => data.pages.filter(page => page.parent === 'home'));
}

然后我把它改成了这个:

resolve() {
  this.store.dispatch(new LoadConfigAction());
  return this.store
    .select('configuration')
    .do(data => console.log(data))
    .map((data: any) => data.pages.filter(page => page.parent === 'home'));
}

我在我的控制台中获取数据,因此正在检索数据,但解决的问题显然没有完成,因此导航不会发生.

我想知道是否可能来自this.store的返回类型与我的服务中的Observable不同,但我有点迷失.

有任何想法吗？

我正在使用VSCode和更漂亮的插件，打字稿以及tslint。

抛开使用此配置的便利性，我得到了一个

[tslint] Exceeds maximum line length of 120 (max-line-length)

对于这样的一行：

import { MyComponent } from "../../some_very_long_path";

我已经配置了100的打印宽度，因此我希望在Format Document这一行上可以将其重构为以下形式：

import { MyComponent } 
  from "../../some_very_long_path";

或像这样：

import {
  MyComponent
} from "../../some_very_long_path";

但事实并非如此。有什么想法吗？

我在 dart 中有一个 Identity 类，它看起来（简化）如下

class Identity {
  final String phoneNumber;

  Identity({@required this.phoneNumber});

  Identity.fromJson(Map<String, dynamic> json)
      : phoneNumber = json['phoneNumber'];

}

我将使用这个类向我的身份服务发送一个 http POST；此服务将返回一个我想映射到 ActiveIdentity 的 json，它看起来像这样（也简化了）。

class ActiveIdentity extends Identity {
  final String id;

  ActiveIdentity.fromJson(Map<String, dynamic> json)
          : id = json['id'];
}

现在，有没有办法在 Identity 中扩展或调用 fromJson 以便我可以“扩展”这个方法？理想情况下，在 ActiveIdentity 中调用 fromJson 时，我应该收到一个新的 ActiveIdentity 实例，其中所有属性都已初始化（phoneNumber 和 id），但在 ActiveIdentity 上，我只想处理 id。

我也试图从 mixin 的角度考虑这个问题，但失败了……关于如何实现这一目标的最佳方法有任何想法吗？

谢谢！