我有两个组件，一个父级和另一个子级。

HTML 部分

<div>
  <div class="row col-md-12">
    <div class="col-md-4">
       <!-- Some HTML Code of Parent component over here -->
    </div>
    <div class="col-md-8">
      <child-component></child-component>
    </div>
 </div>
 <button class="button" (click)="reloadOnlyChild($event)">Reload Child</button>
</div>

现在，单击此按钮后，我希望唯一的孩子重新加载或刷新。

TS部分

reloadOnlyChild(event){
  // I want to reload the child from here.
}

我在互联网上搜索，我得到的是 Vue 或 React，但不是 Angular。

在构建和打包Angular 6库时,我似乎无法指示Angular CLI将库的资源复制到dist/assets每个构建的文件夹中.

假设项目的文件夹结构是这样的 -

- dist
- e2e
- node_modules
- projects
  - lib1
    - src
      - lib
      - assets
        - icons
- src

当我运行ng build lib1或ng build lib1 --prod在assets/icons文件夹不被复制到dist/lib1/assets/icons.

如果我跑ng build那么src/assets(根SRC /资产)被复制,但没有projects/lib1/assets.

该angular.json文件包含"assets": ["src/assets"]对它的引用,但它不允许将assets密钥专门添加到项目中,只允许添加到主根应用程序.添加时,我收到以下错误:

架构验证失败,出现以下错误:数据路径""不应具有其他属性(资产).

我还尝试将以下自定义复制规则添加到资源,以将资产复制到dist/lib而不是dist/appname:

  "assets": [
     "src/favicon.ico",
     "src/assets",
     { "glob": "**/*", "input": "src/assets/icons", "output": "../lib1/assets/icons" }
        ],

但是我收到以下错误:

无法将资产写入输出路径之外的位置.

是否有在每个构建中管理库资产副本的内置方法？

更新06/05/2018

我向Angular CLI提出了一个问题,但尚未收到回复.问题#11701

我有一个表显示这么多行,我想优化它的性能.我通过使用虚拟滚动技术找到了解决方案.下面是一个Angular Material CDK Vritual Scroll视口组件的示例,div我发现它很简单:

<cdk-virtual-scroll-viewport class="list-container lg" [itemSize]="52.5">
  <div *cdkVirtualFor="let state of statesObservable | async;" class="list-group-item">
     <div class="state">{{state.name}}</div>
     <div class="capital">{{state.capital}}</div>
  </div>
</cdk-virtual-scroll-viewport>

但是,我想将它与Angular Material Table集成,如下所示

<table mat-table [dataSource]="dataSource">
    <ng-container  *ngFor="let c of displayedColumns" [matColumnDef]="c">
      <th mat-header-cell *matHeaderCellDef>{{getTitle(c)}}</th>
      <td mat-cell style="white-space: pre-wrap;" *matCellDef="let element"> {{element[c]}}</td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
 </table>

我不知道如何来包装cdk-virtual-scroll-viewport到mat-table.我的表最多显示1000行和20多列,并且在加载和滚动时性能非常慢.

PS:我知道它可以通过使用Paginator解决,但我不想那样做.

版本

1. "@angular/material": "^6.2.0"
2. @angular/cdk": "^6.2.0"
3. @angular/cdk-experimental": "^6.2.1"
4. "@angular/core": "6.0.3"
5. "@angular/cli": …

我想知道如何新的角度2服务装饰

@Injectable({
    providedIn: 'root'
})

与延迟加载一起工作.这意味着如果我有一个延迟加载的模块,并且提供了一个在root中提供的服务,那么这将包括应用程序基本代码中的特定服务.应用程序root chunks.js或者这仍然会延迟加载服务,然后在我懒加载该模块时使其成为全局单例.

有关提供的信息

https://angular.io/guide/ngmodule-faq

我很难将angulars服务工作者整合到我的应用程序中.我按照指南进行操作至今.我可以在主屏幕上创建一个快捷方式并启动到我的应用程序中.问题是我的应用程序不知何故不更新.如果我改变一个按钮的名称,构建应用程序,并把它放到我的服务器应用程序仍显示旧版本,直到我打了F5(重新启动应用程序并没有帮助).

我试着将以下代码放入我的应用程序的ngOnInot中,但它没有帮助

ngOnInit() {
if (this._SwUpdate.isEnabled) {

  setInterval( () => {
    this._SwUpdate.checkForUpdate().then(() => console.log('checking for updates'));
  }, this.updateInterval);

  this._SwUpdate.available.subscribe(() => {

    console.log('update found');

    this._SwUpdate.activateUpdate().then(() => {
      console.log('updated');
      window.location.reload();
    });

  });

}

}

该应用程序正在我的apache2 linux机器上运行.我的apache缓存了什么,或者为什么我的应用程序没有意识到有新版本？

在此先感谢您的帮助 :)

编辑:

我的ngsw-config.json

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "roomPlan",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/index.html",
        "/*.css",
        "/*.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }]
}

编辑2:

如果我使用"http-server"在本地运行应用程序,但是当我将文件复制到我的apache时,它不会检测到更新.在网络选项卡中,我可以看到间隔工作,应用程序每隔3秒从服务器获取一个新的"ngsw.json".如果我更新我的应用程序,我可以看到"ngsw.json"的响应中有新的哈希值.之后,浏览器从我的服务器加载新的"index.html"和"main.***.js",但应用程序不应用新版本.根据我的代码,它应该说"发现更新",但没有任何反应.

this.service.service1().subscribe( res1 => {
  this.service.service1().subscribe( res2 => {
    this.service.service1().subscribe( res3 => {
      this.funcA(res1, res2, res3);
  });
  });
});

我需要将三个数据从三个不同的API传递给一个函数.

在订阅中订阅是一种好习惯吗？

如果没有,请建议最佳方式.

我正在升级到Angular 6

在升级指南之后,我遇到以下问题:

> ng update @angular/core                
Invalid range: ">=2.1.0"

......这就是我的全部.没有其他警告或任何其他说明.在我的项目中,"> = 2.1.0"字符串也不匹配.

ng -v 结果:

Angular CLI: 6.0.0
Node: 9.4.0
OS: linux x64
Angular: 4.1.3
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router, tsc-wrapped

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.0
@angular-devkit/build-angular     0.6.0
@angular-devkit/build-optimizer   0.6.0
@angular-devkit/core              0.6.0
@angular-devkit/schematics        0.6.0
@angular/cli                      6.0.0
@ngtools/webpack                  6.0.0
@schematics/angular               0.6.0
@schematics/update                0.6.0
rxjs                              6.1.0
typescript                        2.3.2
webpack                           4.6.0

更新:事情不起作用:

• 手动更新所有内容到最新版本
• 手动更新rxjs
• 将typescript更新为2.7.2然后更新为2.8.3
• 尝试去 ng update --all
• npm install …

我正在升级到Angular 6,但看起来我在运行ng serve或ng build时遇到错误.

我确实收到以下错误

无法解构'undefined'或'null'的属性'createHash'.TypeError:无法解析'undefined'或'null'的属性'createHash'.在对象.(C:\用户\了Stian \源\回购\ minside\SRC\MinSide.Web \领域\ ClientApp \node_modules \迷你CSS-提取物的插件\ DIST\index.js:26:44)

我一直在关注更新指南https://update.angular.io/

看起来它与webpack有关,但是如果有人知道如何解决这个问题或者自己经历过这个问题.感谢帮助

我正在将我的应用程序升级到Angular 6.我正在从Angular 4升级,但下面的代码在Angular 6中导致错误,它在Angular 4中运行良好.

我得到的错误:

类型'typeof Observable'上不存在属性'of'

错误:类型'Observable'上不存在属性'catch'

我该如何解决这些错误？

  private authInterceptor(observable: Observable<Response>): Observable<Response> {
    return observable.catch((error, source) => {
      if (error.status == 401) {
        this.router.navigateByUrl('/login');
        return Observable.of();
      } else {
        return Observable.throw(error);
      }
    });
  }

我为Angular 6应用程序导入NoopAnimationsModule后出现此错误

ERROR TypeError: this.driver.matchesElement is not a function
    at TransitionAnimationEngine.push../node_modules/@angular/animations/fesm5/browser.js.TransitionAnimationEngine.processLeaveNode (browser.js:2976)