一 在index.html中，替换根组件选择器

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>Angular4ReactiveForm</title>

  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="icon" type="image/x-icon" href="favicon.ico">

</head>

<body>

  <app-hero-list></app-hero-list>

</body>

</html>

二 在根模块的注解中，替换根组件

import { BrowserModule } from '@angular/platform-browser';

import { ReactiveFormsModule } from '@angular/forms';

import { NgModule } from '@angular/core';

import { HeroListComponent } from './hero-list/hero-list.component';

import { HeroDetailComponent } from './hero-detail/hero-detail.component';

@NgModule({

  declarations: [

    HeroListComponent,

    HeroDetailComponent

  ],

  imports: [

    BrowserModule,

    ReactiveFormsModule

  ],

  providers: [],

  bootstrap: [HeroListComponent]

})

export class AppModule { }

三 如果浏览器控制台没有报错 ( The selector "app-hero-list" did not match any elements )，并编译、运行，则替换成功。

Angular之替换根组件的更多相关文章

  1. Vue 根组件,局部,全局组件 | 组件间通信,案例组件化

    一 组件 <div id="app"> <h1>{{ msg }}</h1> </div> <script src=" ...

  2. Angular05 angular架构、搭建angular开发环境、组件必备三要素、angular启动过程

    1 angular架构 1.1 组件:是angular应用的基本构建模块,可以理解为一段带有业务逻辑和数据的HTML 1.2 服务:用来封装可重用的业务逻辑 1.3 指令:允许你想HTML元素添加自定 ...

  3. Dynamics CRM2011 导入解决方案报根组件插入错误的解决方法

    今天在还原一个老版本的解决方案,在导入时报根组件插入问题"Cannot add a Root Component 38974590-9322-e311-b365-00155d810a00 o ...

  4. Vue 框架-11-介绍src文件流程及根组件app+HBuilder 配置

    Vue 框架-11-介绍src文件流程及根组件app+HBuilder 配置 这是上一篇对目录简单介绍: 关于编辑器,可以使用轻量级的 Sublime Text 3,我使用的是 HBuilder, 但 ...

  5. Angular各版本和组件下载

    Angular各版本和组件下载:https://code.angularjs.org/

  6. Vue父子组件传值之——访问根组件$root、$parent、$children和$refs

    Vue组件传值除了prop和$emit,我们还可以直接获取组件对象: 根组件: $root // 单一对象 表示当前组件树的根 Vue 实例,即new Vue({...根组件内容}).如果当前实例没有 ...

  7. Vue子组件和根组件的关系

    代码: <script type="text/javascript"> const Foo = Vue.extend({ template: `<div id=& ...

  8. 关于Vue中根组件与组件树的理解

    在观看了b站的关于Vue3的教学视频后,对Vue的根组件与组件树进行简单的总结下 一.实例化Vue应用 // 此时,app就是一个Vue应用的实例,或者说是一个对象 const app = Vue.c ...

  9. Angular 学习笔记 (动态组件 & Material Overlay & Dialog 分析)

    更新: 2019-11-24  dialog vs router link refer : https://stackoverflow.com/questions/51821766/angular-m ...

随机推荐

  1. delphi RTTI 四 获取类属性列表

    delphi RTTI 四 获取类属性列表 GetPropList(btn1.ClassInfo, tkAny, PropList) PropCount := GetTypeData(btn1.Cla ...

  2. oracle第二天笔记

    多表查询 /* 多表查询: 笛卡尔积: 实际上是两张表的乘积,但是在实际开发中没有太大意义 格式: select * from 表1,表2 */ select * from emp; select * ...

  3. Spring STS Call Hierarchy 查找不到被调用的信息

    今天使用Spring的STS的时候,发现Call  Hierarchy无法使用,很奇怪,发现问题出现在同一个工作区间里,如果工作区间不在此工作区间,发现还是可以找到被调用的信息的.当时在网上找也没找到 ...

  4. How to Pronounce the Days of the Week

    How to Pronounce the Days of the Week Share Tweet Share Vocabulary study:  how to pronounce the days ...

  5. Kotlin语言编程技巧集

    空语句 Kotlin 语言中的空语句有 {} Unit when (x) { 1 -> ... 2 -> ... else -> {} // else -> Unit } Wh ...

  6. 为什么虚拟DOM更优胜一筹

    注意: 虚拟DOM只是实现MVVM的一种方案,或者说是视图更新的一种策略.没有虚拟DOM比MVVM更好一说. 我们回顾传统MVC框架,如backbone,它是将某个模板编译成模板函数,需要更新时,是自 ...

  7. C语言函数入参压栈顺序为什么是从右向左？

    看到有人提问到,在处理printf/cout时,压栈顺序是什么样的?大家都知道是从右往左,也就是说从右往左的计算,但是,这里的计算不等于输出. a++和++a的压栈的区别:在计算时,遇到a++会记录此 ...

  8. list 转datatable

    //public static DataTable ListToDataTable(List<FwImage> entitys) //{ // //检查实体集合不能为空 // if (en ...

  9. 使用jQuery匹配文档中所有的li元素，返回一个jQuery对象，然后通过数组下标的方式读取jQuery集合中第1个DOM元素，此时返回的是DOM对象，然后调用DOM属性innerHTML,读取该元素 包含的文本信息

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. 2.Servlet基础.md

    目录 1.定义 2.特点 3.手动编写一个Servlet 3.1创建一个Servlet类 3.2找到编写类的class文件,将这个类的整个包拷贝到一个web应用中的WEB-INF/classes目录下 ...