routerLink от объекта в Angular2

Я пытаюсь создать страницу «Член команды» из данных JSON.

Я могу создать страницу с основными вещами, такими как имя, фамилия, позиция.

У каждого члена команды есть своя страница с небольшой дополнительной информацией

Чего я не могу понять, так это того, как включить URL-адрес членов команды в мой [routerLink].

Ссылка на мой маршрутизатор будет выглядеть так, как я настроил в своих маршрутах.

<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}}' />

Однако по одному делу!

Спасибо

ГВС


angular html routerlink
person Glenn Sampson    schedule 19.01.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы неправильно используете привязку {{ foo.bar }}, синтаксис {{ }} позволяет вам выполнять одностороннюю привязку, вы хотите использовать обычные выражения js при привязке к свойствам ваших объектов.

При привязке к атрибуту элемента html вы можете использовать привязку [attr.{id|href|etc}] в вашем случае для href изображения, которое вы можете использовать:

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

А для маршрутизатора просто используйте [routerLink] = "[teammember.firstName]" (не уверен, зачем вам нужен ./, если он вам нужен, вы можете добавить его, используя геттер в классе члена вашей команды, как показано ниже.

Для ваших маршрутов вы можете сделать что-то вроде:

Класс члена команды

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>

Hope this helps!

person Daniel Ormeño    schedule 19.01.2017
comment
спасибо очень хорошее объяснение. Я реализовал это, но не совсем работает... теперь это моя ссылка ‹a ng-reflect-router-link=['./shankwee'] ng-reflect-href=#/team/%5B'. /shankwee'%5D href=#/team/%5B'./shankwee'%5D› знаете ли вы, как удалить символы? - person Glenn Sampson; 19.01.2017
comment
пожалуйста, проигнорируйте настройку URL-адреса члена команды, который был неправильным - person Glenn Sampson; 19.01.2017

arrow_upward
0
arrow_downward

можно попробовать так:

 ['./',teammember.firstName]

для использования img

<img alt="" [src]="teammember.photo" />
person ani5ha    schedule 19.01.2017