Angular2組件構造函數沒有調用

Question

我的演示應用程序組件的構造函數在應用程序啟動時沒有調用：

演示組件：

@Component({
  selector: 'app-demo-page',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.css']
})
export class DemoComponent implements OnInit {

  constructor() {
    console.log('constructor run');
  }

  ngOnInit() {
    console.log('oninit run');
  }
}

路由模塊：

const routes: Routes = [
  {
    path: 'demo',
    component: DemoComponent ,
    resolve: {
      data: DemoResolverService
    }
  },
  {
    path: '',
    component: AppComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

解析器服務：

@Injectable({
  providedIn: 'root'
})
export class DemoResolverService implements Resolve<SomeData> {
  constructor(private logic: demoService) {}

  resolve(): Observable<SomeData> {
    console.log('dataresolver run');

    return this.logic.getAll();
  }
}

解析器服務構造函數成功運行，並且在導航之前也調用了它。 但是組件不是構造函數沒有運行。 有什么想法為什么它停止工作？ 謝謝

Answer 1

在 app.component.html 中添加<router-outlet></router-outlet>

工作演示

Angular 中的路由器插座用作占位符，用於根據激活的組件或當前路由動態加載不同的組件 state