Angular Route Resolves 和 Observables 通过子组件答案

【问题标题】：Angular Route Resolves and Observables through child componentAngular Route Resolves 和 Observables 通过子组件
【发布时间】：2018-07-11 02:17:06
【问题描述】：

我正在尝试在我的 Angular 应用程序的解析器状态下使用 Observables。

这里是 plunkr：https://plnkr.co/edit/e9XMEKnW3uHjoWxxpUEZ?p=preview

我有一个应用程序，左侧有一个侧边栏，根据路线可以看到项目列表。侧边栏组件位于根组件的 html 中。

<body>
    <articles-list [articles]="posts"></articles-list>
    <router-outlet></router-outlet>
</body>

在右侧，我们有每个项目的详细信息。该组件通过具有解析器以从 API 端点收集数据的路由加载。我在根组件中有路由器插座。

// Routes
const routes: Routes = [
  { path: "", redirectTo: "articles", pathMatch: "full" },
  {
    path: "articles",
    component: ArticleDetailComponent,
    resolve: {
    posts: ArticlesResolver
  }
];

我已经有一个设置工作，侧边栏可以成功显示来自 API 的项目列表，但我似乎无法在我的组件类中访问该列表，我正试图找出原因。

export class ArticlesComponent implements OnInit {
  @Input() articles: any;
    resultsLength: Number;

    constructor() {
        // Both are undefined
        //this.resultsLength = this.articles.length;
        console.log(this.articles);
    }



    ngOnInit() {
        // Both are undefined
        //this.resultsLength = this.articles.length;
        console.log(this.articles);

    }
 }

我做错了什么吗？或者我应该做些什么来访问数据？我试图弄清楚为什么即使没有完成 GET 调用也会触发 observable。

【问题讨论】：

标签： angular typescript rxjs

【解决方案1】：

试试这个：

_articles: any;

@Input()
get articles(): any {
    return this._articles;
}
set articles(value: any) {
  this._articles = value;
}

通过使用 getter/setter，它将在更新时获取值。所以在 Observable 完成后，它将具有当前值。

【讨论】：

谢谢！！！有没有办法也可以通过 ngOnInit 获取值？我更新了 plunker，可以看到值得到了更新，但是 onInit 方法仍然返回 undefined -> plnkr.co/edit/e9XMEKnW3uHjoWxxpUEZ?p=preview
我猜想当组件初始化时（在 ngOnInit 中）该值尚未传入，因此将是未定义的。如果您需要编写代码（如示例中的 resultsLength），将其添加到设置器中。或者你可以使用 ngOnChanges 事件。