Question

这是我的app.module.ts

{
  "Id": "AllowRoleAccess",
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "AllowRole",
      "Action": "s3:*",
      "Effect": "Allow",
      "Resource": [
        "arn:aws:s3:::BUCKET-NAME",
        "arn:aws:s3:::BUCKET-NAME/*"
      ],
      "Principal": {
        "AWS": [
          "arn:aws:iam::222222222222:role/ROLE-NAME"
        ]
      }
    }
  ]
}

这就是我从搜索组件的html中调用我的路线的方式：

@NgModule({
  declarations: [
    AppComponent,
    PrimaryTestComponent,
    HomeComponent,
    RegisterComponent,
    LoginComponent,
    SearchComponent,
    DentistProfileComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    HttpClientModule,
    FormsModule,
    JsonpModule,
    RouterModule,
    ClarityModule,
    RouterModule.forRoot([
                           { path: 'home', component: HomeComponent },
                           { path: 'register', component: RegisterComponent },
                           { path: 'login', component: LoginComponent },
                           { path: 'search', component: SearchComponent, children: [{path:'result/:name', component: DentistProfileComponent}
                           ]}
                         ])
  ],
  providers: [
    PrimaryTestService,
    SearchService
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

这是我想要在点击事件

上加载的我的dentist-profile.component.ts

<clr-dg-row *ngFor="let dentist of dentists">
        <clr-dg-cell>{{dentist.firstName}}</clr-dg-cell>
        <clr-dg-cell>{{dentist.lastName}}</clr-dg-cell>
        <clr-dg-cell>{{dentist.city}}</clr-dg-cell>
        <clr-dg-cell>{{dentist.type}}</clr-dg-cell>
        <clr-dg-cell [routerLink]="['result',dentist.firstName]">View Profile</clr-dg-cell>
      </clr-dg-row>

问题是，点击后，网址会发生变化，但我的pentist-profile组件未加载。我希望它替换它的父组件（即SearchComponent），但它看起来甚至不会首先加载。我有什么想法，我做错了什么？

顺便提一下，这是我的main.component.html：

@Component({
  selector: 'dentist-profile',
  templateUrl: './dentist-profile.component.html',
  styleUrls: ['./dentist-profile.component.css'],
  providers: [DentistProfileService]
})
export class DentistProfileComponent implements OnInit {
  id;
  constructor(private _Activatedroute:ActivatedRoute,
              private _router:Router){
  }
  ngOnInit() {
    this.id = this._Activatedroute.snapshot.params['id'];
  }
}

现在它只是一个div来测试它牙医-profile.component.html

<div class="main-container">
  <header class="header header-6">
    Dentists Appointment System
  </header>
  <nav>
    <a routerLink="/home" routerLinkActive="active">Home</a>
    <a routerLink="/search" routerLinkActive="active">SEARCH</a>
    <a routerLink="/login" routerLinkActive="active">Login</a>
    <a routerLink="/register" routerLinkActive="active">Register</a>
  </nav>
  <router-outlet></router-outlet>
</div>

路由器子组件未加载

0 个答案: