Question

我正试图理解在我的Angular应用程序的Resolver状态下使用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的项目列表，但我似乎无法在我的Component Class中访问该列表，而我正试图找出原因。

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。

Answer 1

请改为尝试：

_articles: any;

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

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

Angular Route通过子组件

1 个答案: