来自 Angular2 中对象的 routerLink

Question

我正在尝试从 JSON 数据构建一个 "Team Member" 页面。

我可以用名字、姓氏、职位等基本内容创建页面。

每个团队成员都有自己的页面，其中包含更多信息

我不知道如何将团队成员 url 添加到我的 [routerLink]。

我的路由器 link 看起来像我在路由中设置的这样

<a [routerLink]="['./glenn']">

这就是我尝试使用它的方式

<div class="team-members" *ngFor="let teammember of teammembers" >
 <div class="clearfix">       
   <div class="col-xs-12 col-sm-8 col-md-8 col-lg-6 team-member member-item" style="cursor: pointer;">         
    <a [routerLink]="['./"{{teammember.firstName}}"']">
    <div class="member-pic-holder">
     <img alt="" src='{{teammember.photo}}' />
     <div class="member-overlay"></div>
    </div>
    <h4>{{teammember.firstName}}<br/>{{teammember.lastName}} <span class="fa fa-arrow-right"></span></h4>
    <p class="company-position">{{teammember.position}}</p>
    </a>
   </div> 
 </div>
</div>

请问对这个有什么想法吗？

当我尝试添加团队成员照片时，它也出现问题

 <img alt="" src='{{teammember.photo}}' />

但是一次一件事！

谢谢

GWS

Answer 1

您使用的 {{ foo.bar }} 绑定不正确，{{ }} 语法允许您进行单向绑定，您想要的是在绑定到对象属性时使用正则 js 表达式。

当绑定到 html 元素属性时，您可以使用 [attr.{id|href|etc}] 绑定，在您的情况下，您可以使用图像的 href：

<img alt="" [attr.href] = 'teammember.photo' />

对于路由器，只需使用 [routerLink] = "[teammember.firstName]"（不确定为什么需要 ./，如果确实需要，可以在团队中使用 getter 附加它会员class，如下图

对于你的路线，你可以按照以下方式做一些事情：

团队成员Class

export class TeamMember {
    // ...properties and constructor
    private memberUrl: string = "foobar"

    get MemberRoute(){
        return `./${this.memberUrl}`;
    }
}

模板：

<div class="team-members" *ngFor="let teammember of teammembers" >
    <div class="clearfix">                          
        <div class="col-xs-12 col-sm-8 col-md-8 col-lg-6 team-member member-item" style="cursor: pointer;">                                 
            <a [routerLink]="[teammember.MemberRoute']">
            <div class="member-pic-holder">
                <img [attr.href] = 'teammember.photo' />
                <div class="member-overlay"></div>
            </div>
            <h4>{{teammember.firstName}}<br/>{{teammember.lastName}} <span class="fa fa-arrow-right"></span></h4>
            <p class="company-position">{{teammember.position}}</p>
            </a>
        </div>
    </div>
</div>

希望对您有所帮助！

Answer 2

你能不能这样试试：

 ['./',teammember.firstName]

用于 img

<img alt="" [src]="teammember.photo" />

来自 Angular2 中对象的 routerLink

routerLink from Object in Angular2

html

routerlink

angular