Angular2 Routing : Laden zweimal
Ich bin mit Angular2 mit routing und meiner Seite zeigt duplicate content beim erstmaligen laden. Sobald ich auf irgendeinen Link(Page1 oder Page2) funktioniert alles perfekt(es gibt keine mehr zu duplicate content). Warum bin ich immer die doppelten Inhalte auf der ersten laden und was brauche ich, sodass es nur einmal
Screenshot
index.html
HTML:
<html>
<head>
<base href="/">
<title>Angular QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>
Loading...
</my-app>
</body>
</html>App.- Modul.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { Page1Component } from './Page1/Page1.component';
import { Page2Component } from './Page2/Page2.component';
import { RouterModule } from '@angular/router';
@NgModule({
imports: [BrowserModule,
RouterModule.forRoot([
{ path: '', component: AppComponent },
{ path: 'Page1', component: Page1Component },
{ path: 'Page2', component: Page2Component }
])
],
declarations: [AppComponent, Page1Component, Page2Component],
bootstrap: [AppComponent]
})
export class AppModule { }
App.html(diese geladen wird bei der ersten Anfrage)
HTML:
<div class="container">
<div class="row">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a [routerLink]="['/Page1']">Page1 <span class="sr-only">(current)</span></a></li>
<li><a [routerLink]="['/Page2']">Page2</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<div class="row">
<div class="md-col-2"></div>
<div class="md-col-10"><router-outlet></router-outlet></div>
</div>
</div>Schreibe einen Kommentar
Du musst angemeldet sein, um einen Kommentar abzugeben.
Den
AppComponentsollte nicht Teil des plans. Es ist, was hält die root-outlet.Was sollten Sie tun, anstatt für die Basis Weg, ist, zu entscheiden, von welcher Komponente/Pfad sollte die Standard-Ansicht, dann redirect auf den Weg. Zum Beispiel, wenn die Seite 1 sollte die Standard-Ansicht, dann tun