3
私はタブ付きのダッシュボードを作成しており、角度2のルータv.3.0.0-beta.1を使用しています。ページを読み込むたびに、タブをクリックして/ダッシュボードを実際に表示する必要があります。最初はタブ1の私のルートリンク（現在はコメントアウト）と関係があると思っていましたが、まだそれがなければ起こります。私はタブ1の自動表示をして、各タブに独自のルートが含まれるようにしようとしています。他のタブは、異なるルートや印刷機能を含むという意味では機能していないようです。どんな助けもありがとう。
app.component.ts：ボタン2をクリックするまで角度2のルータがリフレッシュ中にロードされない
@Component({
moduleId: module.id,
selector: 'app',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
directives: [
MD_SIDENAV_DIRECTIVES,
MD_LIST_DIRECTIVES,
MD_CARD_DIRECTIVES,
MdToolbar,
MdButton,
MdInput,
MdCheckbox,
MdRadioGroup,
MdRadioButton,
MdIcon,
MD_TABS_DIRECTIVES,
DashboardsComponent,
ROUTER_DIRECTIVES
],
providers: [MdIconRegistry, MdRadioDispatcher, DashboardService],
precompile: [DashboardsComponent]
})
export class AppComponent implements OnInit {
dashboards: Dashboard[];
selectedDashboard: Dashboard;
constructor(private dashboardService: DashboardService,
private router: Router) { console.log("outer constr");}
ngOnInit() {
console.log("outer init");
}
print() {console.log("TRYING");}
}
app.routes.ts
const routes: RouterConfig = [
{
path: '',
redirectTo: '/dashboard',
pathMatch: 'full'
},
{
path: 'dashboard',
component: DashboardsComponent
}
];
export const appRouterProviders = [
provideRouter(routes)
];
app.component.html
<md-sidenav-layout>
<md-sidenav mode="push"#sidenav>
<!-- <md-nav-list>
<a md-list-item *ngFor="let view of views">
<md-icon md-list-icon>{{view.icon}}</md-icon>
<span md-line>{{view.name}}</span>
<span md-line class="secondary">{{view.description}}</span>
</a>
</md-nav-list>-->
</md-sidenav>
<md-toolbar color="primary">
<!--button md-icon-button (click)="sidenav.open()"">
<md-icon>menu</md-icon>
</button-->
Braavos
</md-toolbar>
<md-tab-group>
<md-tab>
<template md-tab-label>One</template>
<nav>
<!--a routerLink="/dashboards" routerLinkActive="active">One</a-->
</nav>
</md-tab>
<md-tab (click)="print()">
<template md-tab-label>Two</template>
</md-tab>
<md-tab (click)="print()">
<template md-tab-label>Three</template>
</md-tab>
<md-tab>
<template md-tab-label>Four</template>
</md-tab>
<md-tab>
<template md-tab-label>Five</template>
</md-tab>
</md-tab-group>
</md-sidenav-layout>
<!--THIS IS WHERE ALL ROUTING APPEARS-->
<router-outlet></router-outlet>
dashboards.component.ts
@Component({
selector: 'dashboards',
moduleId: module.id,
templateUrl: 'dashboards.component.html',
styleUrls: ['./../app.component.css'],
directives: [
MD_LIST_DIRECTIVES,
MD_CARD_DIRECTIVES,
MdButton,
MdInput,
MdCheckbox,
MdRadioGroup,
MdRadioButton,
MdIcon,
],
providers: [MdIconRegistry, MdRadioDispatcher],
})
export class DashboardsComponent implements OnInit, OnDestroy {
dashboards: Dashboard[];
selectedDashboard: Dashboard;
private sub: any;
constructor(
private route: ActivatedRoute,
private router: Router,
private service: DashboardService) {
this.service.getDashboards(1).then(dashboard => this.dashboards = dashboard);
}
ngOnInit() {
this.sub = this.route.params.subscribe(params => {
let id = +params['id']; // (+) converts string 'id' to a number
});
console.log("init");
}
ngOnDestroy() {
this.sub.unsubscribe();
}
onSelect(dashboard: Dashboard) { this.selectedDashboard = dashboard; console.log(this.selectedDashboard.name); }
//gotoDashboards() { this.router.navigate(['/dashboards']); }
}
私はあなたがあなたの質問に含めているコードの量をダウントリミング推薦する - 彼らはすぐに面倒なコードを参照することができれば、人々は答えを投稿する可能性が高くなります。 – Toby
問題がどこにあるのかわからないのですが、どのコードをトリミングすべきですか？このバグがいずれかにある可能性があり、または角度2のバグかもしれないので、私は関連するファイルを含めました –
あなたは投稿から削除すると確信するコードは1行ではありませんか？あなたは現在のコードを投稿しましたが、これはいいですが、この量のコードと簡単なテスト方法がないので、ここを閲覧している多くの人が答えられる可能性があります。 – Toby