在 Angular 2 Material 中将 md-cards 创建为链接

Question

在包含卡片的整个组件周围放置锚标记 ("[routerLink]") 会改变样式（创建 link class 以尝试禁用样式没有帮助）。

将卡片（在本例中为 md-card）动态创建为可点击的 link 的正确方法是什么？

换句话说，每张卡片都是可点击的，并且 link 可以看到不同的视图。

Answer 1

如果您不需要使用 routerLink，您可以使用点击事件并从组件内部导航。

示例组件：

import { Component, OnInit } from '@angular/core';
import {Router} from '@angular/router';

interface Thing{
    name:string;
    route:string;
}

@Component({
    selector: 'app-things',
    template: `
        <md-card *ngFor="let thing of things" (click)="navigate(thing)">
            Simple card
        </md-card>
    `
})
export class ThingsComponent implements OnInit {
    things: Thing[];

    constructor(
        private router: Router
    ) { 
        //todo initialize things
    }

    navigate(thing:Thing){
        this.router.navigate(thing.route);
    }
}

在 Angular 2 Material 中将 md-cards 创建为链接

Creating md-cards as links in Angular 2 Material

angular-material2

angular