Question

我有一个searchComponent，里面有appBookList组件。您可以在下面看到包含appBookList的searchComponent的代码：

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12">
      <form class="form-group">
        <label>Search Book:</label>
        <input type="text" [(ngModel)]="searchBooksByName" name="searchByName" placeholder="search Book by Name" />
        <!--<span class="glyphicon glyphicon-filter"></span>-->
        <label>Technology</label>
        <input type="checkbox" [(ngModel)]="showTechBooks" name="tech" />
        <span>|</span>
        <label>Management</label>
        <input type="checkbox" [(ngModel)]="showMgmBooks" name="mgm" />
        <span>|</span>
        <label>fiction</label>
        <input type="checkbox" [(ngModel)]="showFictionBooks" name="fiction" />
      </form>
    </div>
  </div>
  <app-book-list *ngFor="let app of apps | serachBox:searchBooksByName | filterSearch:showTechBooks:showMgmBooks:showFictionBooks " 
  [bookdetails]="app"></app-book-list>
</div>

成功登录后，我想显示此searchComponent并且它已加载，但未加载searchComponent内的app-book-list。此外，一旦我刷新此页面，就会加载app-book-list。

我的路由器文件或模块文件是：

const appRoutes:Routes = [
  {path:'',component:GoogleLoginComponent},
  {path:'books', component:SearchComponentComponent}
]

同样在google登录成功后，我通过以下方式导航到SearchComponentComponent：

 this.router.navigate(['books'])

我的module.ts代码是：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { Routes, RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { HeaderComponentComponent } from './header-component/header-component.component';
import { SearchComponentComponent } from './search-component/search-component.component';
import { BookListComponent } from './search-component/book-list/book-list.component';
import { SerachBoxPipe } from './serach-box.pipe';
import { FilterSearchPipe } from './filter-search.pipe';
import { ServerService } from './server.service';
import { GoogleLoginComponent } from './google-login/google-login.component';

const appRoutes:Routes = [
  {path:'',component:GoogleLoginComponent},
  {path:'books', component:SearchComponentComponent}
]

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponentComponent,
    SearchComponentComponent,
    BookListComponent,
    SerachBoxPipe,
    FilterSearchPipe,
    GoogleLoginComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [ServerService],
  bootstrap: [AppComponent]
})
export class AppModule { }

angular4路由问题，因为未加载子组件

0 个答案: