用户登录

🎉 8 周年订阅优惠

打开应用的首页,页面上显示的内容就是 AppModule 模块里的 AppComponent 这个组件的视图内容。这个组件的视图是在组件的模板里文件里定义的,AppComponent 组件的模块文件是 app.component.html 。

AppComponent 这个组件是在 AppModule 模块的 bootstrap 里面,就是启动的时候要创建的一个组件,因为这个组件是唯一的启动组件,所以这个组件也就是应用里的所有组件的根。

先打开这个组件,定义组件的文件都有个 component 后缀,这个组件设置的它的模板文件就是 app.component.html 文件,组件的 selector 设置成了 app-root。

打开 src 下面的 index.html,这是一个一般的 html 文档的基本结构,我们的 Angular 应用就会在这个文档,你会发现文档里有个 app-root 元素。

因为 AppComponent 组件里设置的 selector 是 app-root,意思就是,把这个组件放在 app-root 元素里面。所以在这个文档用了一组 app-root。

组件的视图是在 app.component.html 这个文件里,剪切一下这个文件里的内容,留下这个 router-outlet,router-outlet 这个地方会显示路由对应的组件内容。

上面添加一组标题,文字是 ninghao。

回到浏览器可以预览一下,现在应用的页面上会显示一个标题,内容是 ninghao。

根组件(AppComponent)《 Angular:模块 》

统计

11440
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点