Question

我是第2角的新手，我正在尝试创建一个新闻网站，这意味着主页例如包含来自不同类别的不同文章。

所以我从api的滑块部分得到了文章，json结果包含链接ex：'/ slider / article1'，'/ sport / article3'等。

当我尝试在html中循环结果时，routerlink无效！

以下是示例代码

Home.component.html //假设该链接包含'/ sport'

<a [routerLink]="[item.link]">{{item.title}}</a>

Route.config.ts

export const rootRouterConfig: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'sport', component: SportComponent }
];

**我忘记提及错误

未捕获（承诺）：TypeError：无法读取属性'outlet' 空

Home.component.ts

import { Component, OnInit } from '@angular/core';
import { HomeService } from '../../_services/home.service';
import { ContentInfo } from '../../_models/content';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  providers: [HomeService]
})
export class HomeComponent implements OnInit {
  mainNewsItem: ContentInfo[];
  constructor(private _homeService: HomeService) {
    this.mainNewsItem = [];
  }
  ngOnInit() {
        // Get Main News Item
        this._homeService.getMainNewsItem()
            .subscribe(content => this.mainNewsItem = content,
            error => this._homeService = <any>error)
            ;
  }
}

我使用了* ngif

*ngIf="mainNewsItem?.length > 0"

div已经不见了，但为什么呢？我的意思是mainNewsItem包含数据！

谢谢：）

Answer 1

您可以使用路线参数：

{ path: 'sport/:articleTitle', component: SportComponent },

来源：Angular doc's: route with parameter

在SportComponent中，您可以在构造函数中注入ActivatedRoute以接收参数：constructor(private route: ActivatedRoute)

如何在角度2中创建动态路由器链接？

1 个答案: