首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular 2:无法将组件包含到另一个组件中

Angular 2是一个流行的前端开发框架,用于构建Web应用程序。它是Angular框架的第二个版本,具有许多改进和新功能。

在Angular 2中,将组件包含到另一个组件中可以通过使用组件的选择器来实现。要将一个组件包含到另一个组件中,需要在父组件的模板中使用子组件的选择器。

以下是一个示例,展示如何将一个组件包含到另一个组件中:

  1. 首先,在父组件的模板中,使用子组件的选择器来包含子组件。例如,如果子组件的选择器是<app-child></app-child>,那么在父组件的模板中可以使用以下代码来包含子组件:
代码语言:txt
复制
<app-child></app-child>
  1. 然后,在子组件的代码中,定义子组件的选择器。例如,可以在子组件的装饰器中使用selector属性来定义选择器:
代码语言:txt
复制
@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
  1. 最后,确保在父组件的模块中导入并声明子组件。例如,在父组件的模块中,可以使用以下代码导入并声明子组件:
代码语言:txt
复制
import { ChildComponent } from './child.component';

@NgModule({
  declarations: [
    ChildComponent
  ],
  // 其他模块配置...
})

这样,子组件就会被包含到父组件中,并且可以在父组件的模板中使用子组件的功能和属性。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

详解ANGULAR2组件的变化检测机制(对比ANGULAR1的脏检测)

组件和变化检测器 如你所知,Angular 2 应用程序是一颗组件树,而每个组件都有自己的变化检测器,这意味着应用程序也是一颗变化检测器树。顺便说一句,你可能会想。是由谁来生成变化检测器?...Angular 2 编译器为每个组件自动创建变化检测器,而且最终生成的这些代码 JavaScript VM友好代码。...虽然 Angular 2 优化后的变化检测执行的速度很快,但我们能否只针对那些有变化的组件才执行变化检测或灵活地控制变化检测的时机呢 ? 答案是有的,接下来我们看一下具体怎么进行优化。...变化检测策略 在 Angular 2 我们可以在定义组件的 metadata 信息时,设定每个组件的变化检测策略。...但如果 ProfileCardComponent 的 profile 输入属性没有发生变化,是没有必要再执行变化检测。针对这种情况,Angular 2 为我们提供了 OnPush 的检测策略。

2.9K90
  • Angular 从入坑到挖坑 - 模块简介

    、HttpClientModule 这种 Angular 内置的库也都是一个个的 NgModule,在开发通过组件、指令、管道、服务或其它的代码文件聚合成一个内聚的功能块,专注于系统的某个功能模块...每个组件都只能声明在一个 NgModule 类,同时,如果你使用了未声明过的组件Angular 将会报错 同样的,对于当前模块使用到的自定义指令、自定义管道,也需要在 declarations 数组中进行声明...数组添加根组件用来作为组件树的根 3.3、特性模块 特性模块是用来特定的功能或具有相关特性的代码从其它代码中分离出来,聚焦于特定应用需求。...CommonModule, FormsModule, CrisisRoutingModule ] }) export class CrisisModule { } 当创建完成后,为了将该特性模块包含到应用...惰性加载可以减小初始的尺寸,从而减少程序首次的加载时间 import { BrowserModule } from '@angular/platform-browser'; import { NgModule

    1.8K20

    2020年值得你去试试的10个React开发工具

    2. React Sight 除了上面的扩展外,我们需要提到另一个Chrome 扩展程序React Sight,它可以帮助你在检查React应用程序时发挥作用。...在这个里,你找到: ReactJS代码片段:它提供了40个React代码片段,它可以满足你所有通用需求以及34个propTypes特定的代码片段。...一共是7个扩展,它们分别为项目提供了一些价值,安装这个扩展,你可以从VS的命令面板使用以下命令(使用CTRL + P打开它)轻松进行安装: ext install jawandarajbir.react-vscode-extension-pack...支持React以外的其他视图层,例如Vue,Angular等)。...React Styleguideist 这是另一个非常有趣的交互式工具,可让您创建和展示您的UI组件。 ? 请仔细查看上图。在右侧,你可以看到实际的代码,它在左侧生成UI。

    7.9K20

    都 9012了,该选择 Angular、React,还是Vue?

    Angular 7 的另一个性能亮点被称为Bundle Budgets,它用于预警开发人员当前使用的JavaScript的大小,当JavaScript 超过 2MB 时开始预警,在达到 5MB 后直接中断生成...但严格来说,Angular与React进行比较并不完全公平,因为Angular是一个功能齐全、组件丰富的框架,而React只是一个UI组件库。...为了解决这个问题,我们将就 Angular 框架的一些常用组件库与 React 进行对比。...,您无法选择不使用它们,这好像一把双刃剑,在带来强大功能模块的同时,也使得Angular 变得越来越笨重。...XSS攻击允许攻击者客户端脚本注入到其他用户查看的网页,以影响其关联的任何JavaScript Web应用程序。 灵活性:React VS Vue 这也是争议最大的地方。

    1.9K20

    GitHub上最流行的Top 10 JavaScript项目

    Yarn也安全性放在第一位,利用 校验和(checksum)的方式去验证每个的完整性。 可靠性,是它的另一个特性。它确保,运行于一个系统之上的安装(),可以以同样高效的方式运行于另一个系统。...Angular 2 ? 相比React,很难说出哪个更好,因为两者各有优劣。 Angular获得Google的支持,因此构建Google应用时,它是一个很好的选择。...另一个优点是 webpack.config的缺省、大量的 *rc-files 及 package.json的相关元素。 React Native ?...React Native使用与iOS、Android 应用相同的UI构建块,这便是App与那些使用Java或Objective-C开发的App无法分辨的原因。...它可以任意数据绑定到DOM上,并将其转化展示在文档。 D3支持大数据集,支持代码复用,可高效操作基于数据的文档。它使用HTML、SVG和CSS来实现所有功能。

    1.1K20

    AngularDart4.0 指南-体系结构概述 顶

    它是作为Angular发布的,与 其他许多Dart一样,可以通过Pub工具获得。...Angular 库 ? Angular全体就像是Angular内的库的集合。...Angular通过简单地应用程序逻辑分解为服务,并通过依赖注入这些服务提供给组件,从而帮助您遵循这些原则。 依赖注入 ? 依赖注入是一种提供一个类的新实例的方法,它需要完整的依赖关系。...如果请求的服务实例不在容器,那么在服务返回给Angular之前,注入器创建一个并将其添加到容器。 当所有请求的服务已经解析并返回时,Angular可以用这些服务作为参数调用组件的构造函数。...Router:在客户端应用程序从一个页面到另一个页面进行导航,而不会离开浏览器 Testing:为您的应用编写组件测试和端到端测试。

    7.9K30

    GitHub上最流行的Top 10 JavaScript项目

    Yarn也安全性放在第一位,利用 校验和(checksum)的方式去验证每个的完整性。 可靠性,是它的另一个特性。它确保,运行于一个系统之上的安装(),可以以同样高效的方式运行于另一个系统。...Angular 2 ? 相比React,很难说出哪个更好,因为两者各有优劣。 Angular获得Google的支持,因此构建Google应用时,它是一个很好的选择。...另一个优点是 webpack.config的缺省、大量的 *rc-files 及 package.json的相关元素。 7. React Native ?...React Native使用与iOS、Android 应用相同的UI构建块,这便是App与那些使用Java或Objective-C开发的App无法分辨的原因。...它可以任意数据绑定到DOM上,并将其转化展示在文档。 D3支持大数据集,支持代码复用,可高效操作基于数据的文档。它使用HTML、SVG和CSS来实现所有功能。

    1.3K20

    Angular 6正式版发布,都有哪些新功能

    ng add @ng-bootstrap/schematics:ng-bootstrap添加到你的应用程序。...应用程序启动 Angular 组件,方法是将它们注册为 Custom Elements,目前已被广泛用于 angular.io 内容管理系统,它嵌入 HTML,可动态启动系统功能。...Angular Material 初始组件 一旦运行ng add @angular/material并添加材料到现有的应用程序,就能够生成 3 个新的初始组件。...表示他们正在长期支持版本扩展到所有主版本。...之前只有 v4 和 v6 是 LTS 版本,但为了使开发者从一个主版本更新到另一个主版本更容易,并给予项目充足的时间来规划更新,Angular 团队表示从 v4 开始,扩大对所有主版本的长期支持。

    4.2K20

    Angular系列教程-第五节

    导入其它带有组件、指令和管道的模块,这些模块的元件都是本模块所需的。 提供一些供应用的其它组件使用的服务。 每个 Angular 应用都至少有一个模块,也就是根模块。...依赖注入 在 Angular ,要把一个类定义为服务,就要用 @Injectable() 装饰器来提供元数据,以便让 Angular 可以把它作为依赖注入到组件。...同样,也要使用 @Injectable() 装饰器来表明一个组件或其它类(比如另一个服务、管道或 NgModule)拥有一个依赖。...3.路由 在用户使用应用程序时,Angular 的路由器能让用户从一个视图导航到另一个视图。...5.npm和yarn 无论使用 npm 还是 yarn 安装的,都会记录在 package.json 文件

    2.9K20

    8分钟为你详解React、Angular、Vue三大框架

    这种情况也就决定了React技术在创建网页应用时标准无法统一。 ?...版本9 Angular 9已于2020年2月6日发布。第9版在默认情况下使用Ivy编译器。Angular可以与TypeScript 3.6和3.7兼容。...下面的代码片段包含了一个Vue组件的例子。该组件显示了一个按钮,并打印出按钮被点击的次数。 ? 2、模板 Vue使用基于HTML的模板语法,允许渲染的DOM绑定到Vue实例的底层数据。...Vue 模板编译成虚拟 DOM 渲染函数。 虚拟文档对象模型(或 "DOM")允许Vue在更新浏览器之前在其内存渲染组件。...5、路由 单页面应用程序(SPA)的一个传统缺点是无法分享到特定网页的确切 "子 "页面的链接。

    22.1K20

    Angular 6+依赖注入使用指南:providedIn与providers对比

    Angular 6为我们提供了更好的语法——provideIn,用于服务注册到Angular依赖注入机制。...在这种情况下,服务不是单例的,每次我们在另一个组件的模板中使用组件时,我们都会获得所提供服务的新实例。 这也意味着服务实例将与组件一起销毁.........简单来讲: 1、如果服务仅被注入到懒加载模块,它将捆绑在懒加载 2、如果服务又被注入到正常模块,它将捆绑在主 这种行为的问题在于,在拥有大量模块和数百项服务的大型应用程序,它可能变得非常不可预测...附注 - 延迟加载模块的多重好处 Angular最大的优点之一是我们可以非常容易的应用程序分成完全独立的逻辑块,这有以下好处… 1、更小的初始化代码,这意味着更快的加载和启动时间 2、懒惰加载的模块是真正隔离的...它防止我们懒加载的服务注入应用程序的正常加载模块 2. 只有当服务被真正注入其他惰性组件时,它才会打包到服务 新语法能在 @Component和 @Directive中使用吗?

    2.8K11

    如何在 Windows 上安装 AngularAngular CLI、Node.js 和构建工具指南

    Angular CLI, Node.js, and Build Tools,作者为Ahmed Bouchefra 在本教程,我们学习如何在 Windows 安装 Angular CLI 并使用它来创建...build (b): Angular 应用程序编译到给定输出路径上名为 dist/ 的输出目录。必须从工作空间目录执行。 config: 检索或设置 Angular 配置值。...我们看看各个文件的作用: /e2e/:包含网站的端到端(模拟用户行为)测试 /node_modules/:使用 npm install 所有 3rd 方库安装到此文件夹 /src/:包含应用程序的源代码...Angular CLI 将自动在 src/app.module.ts 文件添加对组件、指令和管道的引用。...如果您想将组件、指令或管道添加到另一个模块 (主应用程序模块 app.module.ts 除外),您只需在组件名称前加上模块名称和斜杠 即可: $ ng g component my-module/my-component

    47600

    【JavaScript数据网格】上海道宁51component为你带来企业JS开发人员首选的数据网格——AG Grid

    这意味着AG Grid 不仅可以作为React或Angular组件使用,它还允许您在AG Grid中使用React和Angular进行自定义单元格渲染。...AG Grid的 Angular 是完全类型化的,并且完全支持 TypeScript,使其成为无缝的 Angular 开发人员体验。...AG Grid提供了其他网格无法比拟的功能,例如AG Grid的集成图表解决方案 允许用户在无需任何开发工作的情况下直观地探索数据。AG Grid所有功能添加到一个网格。...您可以数据设置为按特定列分组,或者允许用户拖放他们选择的列并动态分组。07、主/细节使用Master Detail扩展行并在内部有另一个包含不同列的网格。...使一个或多个网格水平对齐,以便一个网格的任何列更改都会影响另一个网格。这允许具有不同数据的两个网格保持水平同步。集成图表图表功能与网格深度集成。

    4.3K40

    Angular 5 快速入门与提高

    在5这个新的版本Angular团队改进重点放在以下特性方面: 更易于构建渐进式Web应用 —— __P__rogressive __W__eb __A__pp 使用构建优化器剔除无用代码,以获得更小的应用...NG模块BrowserModule定义于@angular/platform-browser,它是Angular 跨平台战略的重要组成部分。...比如,在Angular2正式版之前,都没有NG模块的概念,你只要写一个组件就可以直接 启动应用了。Angular团队的预期应用场景是大规模前端应用开发,因此显式的NG模块 声明要求也是容易理解的。...即时 编译的第一个问题是在应用需要打包编译器代码,这增加了最终发布的应用代码的 大小;另一个问题在于编译需要时间,这增加了用户打开应用的等待时间。...对于Angular而言,编译入口NG模块定义转换为NG模块工厂(NgModuleFactory)。 对于JIT而言,这一步是隐含在bootstrapModule()的。

    1.8K20

    开始使用-安装 顶

    应用程序可能有多个注入器.Angular应用程序是一个组件树.每一个组件实例有它自己的注入器.组件树与注入器树相平行. 组件的注入器可能是组件更高层级的祖先注入器的一个代理 ....注入器冒泡 当一个组件请求依赖时, Angular尝试使用组件自己的注入器的注册过的提供者满足依赖....如果组件的注入器没有提供者, 它将向上传递请求到父组件的注入器.如果此组件无法满足请求, 它继续沿着此组件自己的父注入器传递....此请求保持向上冒泡直到Angular发现一个注入器能处理此请求或在祖先注入器之外运行. 如果它在祖先注入器之外运行, Angular抛一个错误. 你可以抑制冒泡....如果在今后VillainsService发生更改, 你可能需要在hero组件的某个地方中断某些操作. 这不仅发生在想象以致提供服务的AppComponent产生风险.

    75510

    国庆节前端技术栈充实计划(8):我使用 AngularJS 和 ReactJS 的经验

    React 解决了我们在团队开发编写可维护代码的诉求。 ? 2. React + Flux = ♥ 但沿着这条路走下去,我们发现并不是一切都很美好。...采用 Flux,我们就不用状态保存在 root 组件,然后 update 回调一层层传递给它的子组件。...框架定义的属性(或者,更恰当地说法是 directives)写入到 HTML 的做法让我感觉很不爽。...还有当我想要使用 ngShow 和 ngHide 来显示一个 HTML 块同时隐藏另一个 HTML 块时,在一瞬间,两者同时显示了。...另一个无法吐槽的好东西是:内建的表单控制器,它为 input 字段提供了默认的格式化、解析和校验,而且还提供了一个很好的插件用来展示错误信息。

    1.4K30

    前端三大主流框架的区别(三)

    缺点: 1、难调试,angular的代码整洁、规范,很容易维护和审查,但是它的控制台报错信息太差了,大部分情况是无法看出问题到底在哪,这就在开发过程给调试增加了很大的难度。...2、太重了,它自带了很多模块,这解决了开发人员在选择上耗费的时间,压缩后达到了168k,是vue50k的三倍还多,即使在4版本,拆分了一些功能,但是它依然还是很重 3、学习成本,angular它有超多的概念...jsx语法是html融入到js。 5、state,所有的数据都储存在state,只可以使用setState方法去改变。...开发人员可以把所有的数据都存放在state,让所有组件都去这里边取数据,当然如果组件过多的话会让顶级组件的state过重,这时可以公用的放在顶级state,各自私用的存放在自身的state。...2、它毕竟发展的时间没有它们长,生态环境要更小,有时在开发中出现了问题,无法在网络上寻求到有效的帮助。 4.综合 4.1.

    78510

    AngularDart4.0 高级-层级依赖注入器 顶

    应用程序可能有多个注入器.Angular应用程序是一个组件树.每一个组件实例有它自己的注入器.组件树与注入器树相平行. 组件的注入器可能是组件更高层级的祖先注入器的一个代理 ....注入器冒泡 当一个组件请求依赖时, Angular尝试使用组件自己的注入器的注册过的提供者满足依赖....如果组件的注入器没有提供者, 它将向上传递请求到父组件的注入器.如果此组件无法满足请求, 它继续沿着此组件自己的父注入器传递....此请求保持向上冒泡直到Angular发现一个注入器能处理此请求或在祖先注入器之外运行. 如果它在祖先注入器之外运行, Angular抛一个错误. 你可以抑制冒泡....如果在今后VillainsService发生更改, 你可能需要在hero组件的某个地方中断某些操作. 这不仅发生在想象以致提供服务的AppComponent产生风险.

    86110
    领券