私のメニュークラスを動的に出力するng-forループがあります。最初にページがロードされると、ng-reflect-router-linkおよびng-reflect-hrefが正しく設定されます。問題はリンクがクリックされた後で、すべてのng-reflect-hrefはクリックされたリンクに変更されます。Dynamic RouterLink hrefの値は変更されていますが、ルータのリンクは正しくありません
routes.ts
import { RouterConfig } from '@angular/router';
import { Home } from './views/home/home';
import { FetchData } from './components/fetch-data/fetch-data';
import { Counter } from './components/counter/counter';
export const routes: RouterConfig = [
{ path: 'home', component: Home },
{ path: 'counter', component: Counter },
{ path: 'fetch-data', component: FetchData }
];
サイドバー-menu.ts
import * as ng from '@angular/core';
import {ROUTER_DIRECTIVES, Http} from './index.ts'
@ng.Component({
selector: 'sidebar-menu',
template: require('./sidebar-menu.html'),
directives: [...ROUTER_DIRECTIVES]
})
export class SidebarMenu {
public menus: Menu[];
constructor(http: Http) {
//todo - put this in a service.ts
http.get('/api/Menu/Menus').subscribe(result => {
this.menus = result.json();
});
}
}
menu.ts
interface Menu {
name: string;
decorator: string;
}
サイドバー-menu.html
<ul>
<li *ngFor="#menu of menus" >
<a [routerLink]="menu.name">
<span class='glyphicon glyphicon-th-list {{menu.decorator}}'></span> {{menu.name}}</a>
/li>
</ul>
私は(couterが、私は以下の例にクリックしたリンクです)リンクをクリックした後、これはHTMLは次のようになります。
<ul class="nav navbar-sidebar">
<!--template bindings={
"ng-reflect-ng-for-of": "[object Object],[object Object]"
}--><li>
<a ng-reflect-router-link="counter" ng-reflect-href="/counter" href="/counter">
<span ng-reflect-class-name="glyphicon glyphicon-th-list " class="glyphicon glyphicon-th-list " classname="glyphicon glyphicon-th-list "></span> counter
</a>
</li><li>
<a ng-reflect-router-link="fetch-data" ng-reflect-href="/counter" href="/counter">
<span ng-reflect-class-name="glyphicon glyphicon-th-list " class="glyphicon glyphicon-th-list " classname="glyphicon glyphicon-th-list "></span> fetch-data
</a>
</li>
</ul>
私のプロジェクトがありますDynamic routerLink value from ngFor item giving error "Got interpolation ({{}}) where expression was expected"と非常によく似ています。 しかし、そのリンクとは異なり、私のリンクは正しく表示されています。
リンクが正しい探しているあなたのコンソールがそれについて言う、それが正しいだという意味ではありませんか? –
コンソールにエラーはありません。私がthis.menuを記録するとき、それは必要なように見えます。 – crh225
メニューには何がありますか?そのコードを共有できますか? –