Angular2组件构造函数未调用

时间:2019-10-24 15:58:24

标签: angular angular2-routing

我的演示应用程序组件的构造函数未在应用程序启动时调用:

演示组件:

@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();
  }
}

解析器服务构造函数成功运行,并且在导航之前也被调用。 但是组件不是构造函数无法运行。 有什么想法为什么它停止工作? 谢谢

1 个答案:

答案 0 :(得分:2)

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

Working Demo

Angular中的

Router-outlet用作占位符,用于根据激活的组件或当前路线状态动态加载不同的组件