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

从angular 2/4中的另一个组件通过单击按钮重新加载组件

在Angular 2/4中,可以通过单击按钮重新加载另一个组件。这可以通过以下步骤实现:

  1. 首先,在Angular应用程序中创建两个组件,例如ComponentA和ComponentB。
  2. 在ComponentA的模板中,添加一个按钮,并绑定一个点击事件。
  3. 在ComponentA的组件类中,定义一个方法,该方法会在按钮点击时被调用。
  4. 在该方法中,使用Angular的路由器(Router)导航到ComponentB。

以下是一个示例代码:

在ComponentA的模板中:

代码语言:txt
复制
<button (click)="reloadComponentB()">重新加载ComponentB</button>

在ComponentA的组件类中:

代码语言:txt
复制
import { Router } from '@angular/router';
import { Component, OnInit } from '@angular/core';

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

  constructor(private router: Router) { }

  ngOnInit(): void {
  }

  reloadComponentB(): void {
    this.router.navigateByUrl('/component-b', { skipLocationChange: true }).then(() => {
      this.router.navigate(['/component-b']);
    });
  }
}

在上述代码中,reloadComponentB()方法使用Angular的路由器导航到ComponentB。通过调用this.router.navigateByUrl('/component-b'),我们可以导航到ComponentB的URL。{ skipLocationChange: true }选项用于确保URL的变化不会影响浏览器的历史记录。

请注意,上述示例中的路由导航是基于Angular的内置路由器。如果您使用的是其他路由库或框架,可能需要相应地调整代码。

关于Angular的路由器和导航的更多信息,请参考腾讯云的Angular文档:

这是如何从Angular 2/4中的另一个组件通过单击按钮重新加载组件的解决方案。希望对您有帮助!

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

相关·内容

AngularDart4.0 英雄之旅-教程-07路由 顶

在进行更改时,请通过重新加载浏览器窗口来保持运行。 行动计划 计划如下: 将AppComponent转换为仅处理导航应用程序外壳程序。...路由是导航另一个名称。 路由是导航视图到视图机制。 分割AppComponent 当前应用程序加载AppComponent并立即显示英雄列表。...要在其他地方导航,用户可以单击AppComponent中两个链接之一,或单击浏览器后退按钮。...相反,他们会在此页面上看到一个迷你细节,并且必须单击一个按钮才能导航到完整详细信息页面。...按钮点击事件绑定到一个gotoDetail()方法,该方法应该通过告诉路由器去哪里命令性地导航。 这种方法需要对组件类进行以下更改: 导入angular_router。

17.6K30

纯前端控件集 WijmoJS 2018V2发布,在React、Vue和Angular中更易用

安装后,它会在每个Angular 框架下WijmoJS组件上方添加“Wijmo Designer ...”操作。单击操作按钮后,它将打开一个设计界面,用于自定义该特定组件。...开发人员可以实时更改属性和绑定事件,并将所做更改保存回 Angular应用程序中。 要在VSCode中安装此扩展,请单击VS Marketplace上Designer设置中“安装”按钮。...或者,还可以在VSCode扩展管理器中搜索“wijmo”并从那里安装。 在安装后重新加载VSCode。 然后打开一个使用WijmoJS 控件Angular应用程序并尝试启动设计器。...子组件直接HTMLElementclass继承,底层 WijmoJS 类实例可通过组件特殊控件属性访问。 可以使用组件元素上属性定义 WijmoJS 类属性。...WijmoJS 组件现在不使用Shadow DOM。这将在互操作未来版本中得到解决。目前最大挑战是 WijmoJS 允许通过CSS对其控件部件进行深度定制,而Shadow DOM目标是防止它。

7K20
  • 优化 React APP 10 种方法

    在文本框中输入2并Click Me连续单击按钮,我们将看到ReactComponent将被重新渲染一次,并且永远不会被渲染。 它将上一个道具和状态对象字段与下一个道具和状态对象字段进行浅层比较。...它呈现一个按钮和TestComp组件,如果我们单击Set Count按钮,则App组件将连同其子树一起重新呈现。现在,使用备忘录对TestComp进行备忘录化,以避免不必要重新渲染。...现在,如果我们输入2单击按钮,则将渲染组件,应该渲染该组件,因为先前状态是这样: state = { data: null } 下一个状态对象是这样: state = { data: 2 } 因为...如果再次单击按钮,我们将有另一个重新渲染,不是这样,因为前一个状态对象和下一个状态对象将具有相同data值,但是由于setState新状态对象创建,React将看到差异状态对象引用和触发器重新呈现...再次运行该应用程序,输入2并连续单击该Click Me按钮,您将看到渲染一次,不再进行:) 看到,我们使用了shouldComponentUpdate方法来设置何时重新渲染组件,从而有效地提高了组件性能

    33.9K20

    AngularDart4.0 英雄之旅-教程-08HTTP 顶

    在进行更改时,请通过重新加载浏览器窗口来保持运行。 提供HTTP服务 您将使用Dart http软件包客户端类与服务器进行通信。...刷新浏览器,更改英雄名称,保存更改,然后单击浏览器“后退”按钮。 现在应该继续进行更改。 添加加入英雄能力 要添加英雄,应用程序需要英雄名字。 您可以使用与添加按钮配对输入元素。...添加删除英雄能力 英雄视图中每个英雄都应该有一个删除按钮。 将以下按钮元素添加到英雄组件HTML中,位于重复元素中英雄名称之后。...delete()方法之外,删除按钮单击处理程序代码会停止单击事件传播 - 您不希望触发 click处理程序,因为这样做会选择用户将要删除英雄 。...终点直道 你在旅程尽头,你已经完成了很多。 您添加了必要依赖关系,以在应用程序中使用HTTP。 您重构了HeroService以Web API加载英雄。

    11K30

    AngularDart 4.0 高级-生命周期钩子 顶

    生命周期序列 通过调用其构造函数创建组件/指令后,Angular在特定时刻按以下顺序调用生命周期钩子方法: 钩子 作用和时机 ngOnChanges Angular重新)设置数据绑定输入属性时响应。...peek-a-boo存在以显示Angular如何按预期顺序调用钩子。 此快照反映用户单击“创建...”按钮然后单击“销毁...”按钮后日志状态。 ?...如果用户点击Update Hero按钮,日志会显示另一个OnChanges和两个更多DoCheck,AfterContentChecked和AfterViewChecked三元组。...添加一个英雄会产生一个新英雄。 间谍ngOnInit记录该事件。 重置按钮清除英雄列表。 AngularDOM中移除所有英雄元素并同时销毁他们间谍指令。...大部分初始检查都是由Angular在页面其他地方首次渲染(与数据无关)而触发。 仅仅通过鼠标移动到另一个输入框就会触发一个呼叫。 相对较少调用显示相关数据实际变化。

    6.2K10

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

    它们也被称为 "有状态 "组件,因为它们状态可以在整个组件中保持,并且可以通过props传递给子组件。 ? 虚拟 DOM 另一个值得注意特点是React使用了虚拟文档对象模型,也就是虚拟DOM。...shouldComponentUpdate允许开发者在不需要渲染情况下,通过返回false来防止不必要重新渲染组件。...componentDidMount是在组件 "挂载 "后调用组件已经在用户界面中创建了,通常是通过将其与DOM节点关联起来)。这通常用于通过API远程数据源触发数据加载。...动态加载 异步模板编译 由RxJS提供迭代回调。RxJS限制了状态可见性和调试,但这些问题可以通过像ngReact或ngrx这样反应式附加组件来解决。...该组件显示了一个按钮,并打印出按钮被点击次数。 ? 2、模板 Vue使用基于HTML模板语法,允许将渲染DOM绑定到Vue实例底层数据。

    22.1K20

    AngularDart 4.0 高级-路由概述 顶

    点击页面上链接,浏览器导航到新页面。 点击浏览器后退和前进按钮,浏览器会前后浏览您浏览过网页历史记录。 Angular路由器借鉴了这种模式。...它可以将浏览器URL解释为导航到客户端生成视图指令。它可以将可选参数传递给支持视图组件,以帮助确定要呈现具体内容。您可以将路由器绑定到页面上链接,并在用户单击链接时导航到适当应用程序视图。...概要 该应用程序具有配置路由。 外壳组件有一个RouterOutlet,它可以显示路由产生视图。 它具有RouterLink,用户可以通过路由点击进行导航。...与英雄细节不同,当您键入更新时,危机细节更改是暂时,直到您通过按下“Save”或“Cancel”按钮保存或放弃它们。 这两个按钮都回到危机中心及其危机列表。 不要单击任一按钮。...点击浏览器后退按钮或“英雄”链接。 向上弹出一个对话框。 ? 您可以选择“OK”并丢失您更改,或单击“Cancel”并继续编辑。 这种行为后面是路由routerCanDeactivate挂钩。

    6.1K20

    Angular v18 现已推出!

    angular.json展望未来,无区域为开发人员打开了许多大门:改进微前端可组合性以及与其他框架互操作性更快初始渲染和运行时更小捆绑包大小和更快页面加载速度更具可读性堆栈跟踪调试更简单在组件中使用无区域最佳方式是使用信号...'); handleClick() { this.name.set('Zoneless Angular'); }}在上面的示例中,单击按钮将调用该方法,该方法将更新信号值并更新 UI。...handleClick例如,当用户单击上面的按钮时,由于调度程序合并,Angular 将仅运行一次更改检测。在我们文档中了解更多信息。...在改进框架同时,我们确保所有现有的 API 继续按预期工作,并且我们引入 Angular 所有新内容都有一个很好互操作性故事。Zoneless 是我们互操作性方法另一个例子。...CDK 和 Material 中水合作用支持在 v17 中,一些 Angular Material 和 CDK 组件被选择退出水合,这导致了它们重新渲染。

    22610

    AngularDart4.0 指南- 表单 顶

    请注意提交按钮被禁用,并且输入控件绿色变为红色。 您将以小步骤构建此表单: 创建英雄模型类。 创建控制表单组件。 用初始表单布局创建一个模板。...创建一个基本表单 一个Angular表单有两个部分:一个基于HTML模板和一个组件类,以编程方式处理数据和用户交互。 课程开始,因为它简要地说明了英雄编辑可以做什么。...它有一个绿色边框。 它具有类形式控制和有效性。 2.通过添加一些字符来更改name。 类保持不变。 3.删除名称。 输入框边框变为红色。 is-invalid类替换为is-valid。...您将通过heroForm变量将表单整体有效性绑定到按钮disabled属性: <button [disabled]="!...提交<em>的</em>标志变为真,表格消失。 您将看到表格中显示<em>的</em>英雄模型值(只读)。 ? 该视图包含一个编辑<em>按钮</em>,其<em>单击</em>事件绑定将清除提交<em>的</em>标志。 当您<em>单击</em>编辑<em>按钮</em>时,该表消失,并且可编辑<em>的</em>表单<em>重新</em>出现。

    17.5K30

    AngularDart4.0 指南- 模板语法二 顶

    他们列表中选择项目。 他们点击按钮。 这样用户操作可能导致数据流向相反方向:元素到组件。 了解用户操作唯一方法是侦听某些事件,例如按键,鼠标移动,点击和触摸。...以下事件绑定侦听按钮单击事件,每当发生点击时调用组件onSave()方法: Save 目标事件 圆括号之间名称 - 例如(click...在以下示例中,目标是按钮单击事件。...单击按钮通过双向绑定更新AppComponent.fontSizePx。 修改后size值流向样式绑定,使显示文本变大或变小。...当用户单击按钮时,Angular将$event值分配给AppComponent.fontSizePx。 显然,与单独属性和事件绑定相比,双向绑定语法相当方便。

    30K20

    开始使用-安装 顶

    一个媒介组件可以声明它是“host” 组件.此组件将比注入器搜寻提供者更高效.这是以后主题. 在不同层级再供给 您可以在注入器树多个级别重新注册特定依赖性令牌提供者。...您不必重新注册供应商。 除非你有充分理由,否则你不应该这样做。但是你可以。 随着解决方案逻辑向上发展,第一个提供商遇到了胜利。 因此,中间注射器中提供者树中较低东西拦截对服务请求。...打开一个英雄税单, 填表人单击一个英雄名字, 打开一个组件编辑收入. 每一个选择英雄税单都在他自己组件中打开并且多个返回值能同时被展现    `....组件 (B)是另一个组件 (C)组件, 为CarService定义更多特殊供给器. ? 此种场景之后,每一个组件建立自己注入器定义0, 1,或更多供给器 ....当你转变最深层组件(C) Car实例时, 它注入器生产一个Car实例通过注入器转变(C) Engine 通过注入器 (B)转变 和 Tires通过根注入器(A)转变. ?

    75510

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

    一个媒介组件可以声明它是“host” 组件.此组件将比注入器搜寻提供者更高效.这是以后主题. 在不同层级再供给 您可以在注入器树多个级别重新注册特定依赖性令牌提供者。...您不必重新注册供应商。 除非你有充分理由,否则你不应该这样做。但是你可以。 随着解决方案逻辑向上发展,第一个提供商遇到了胜利。 因此,中间注射器中提供者树中较低东西拦截对服务请求。...打开一个英雄税单, 填表人单击一个英雄名字, 打开一个组件编辑收入. 每一个选择英雄税单都在他自己组件中打开并且多个返回值能同时被展现    `....组件 (B)是另一个组件 (C)组件, 为CarService定义更多特殊供给器. ? 此种场景之后,每一个组件建立自己注入器定义0, 1,或更多供给器 ....当你转变最深层组件(C) Car实例时, 它注入器生产一个Car实例通过注入器转变(C) Engine 通过注入器 (B)转变 和 Tires通过根注入器(A)转变. ?

    86110

    前端必读:如何在 JavaScript 中使用SpreadJS导入和导出 Excel 文件

    然后我们可以在页面中添加一个脚本来初始化 Spread.Sheets 组件和一个 div 元素来包含它(因为 SpreadJS 电子表格组件使用了一个画布,这是初始化组件所必需): <script...让我们在页面上添加一个按钮来执行此操作: Add Revenue 我们可以为该按钮单击事件处理程序编写一个函数来添加一行并从前一行复制样式以准备添加一些数据。...sheet.copyTo(10, 1, newRowIndex, 1, 1, 29, GC.Spread.Sheets.CopyToOptions.style); } 以下用于添加数据和 Sparkline 脚本代码将包含在此按钮单击事件处理程序中...或者,网站 URL 加载文件应该可以在任何浏览器中正常打开。 添加 Excel 导出代码 最后,我们可以添加一个按钮来导出包含添加行文件。...在另一个系列文章中,我们演示了如何在其他 Javascript 框架中导入/导出 Excel 电子表格: React Vue Angular 本文示例下载地址: https://gcdn.grapecity.com.cn

    4.1K10

    Blazor 中路由和路由模板

    通过 ASP.NET MVC,只要请求 URL 无法映射到物理服务器文件,路由组件就会启动。...在客户端上,路由器参与多种情况,最常见情况是用户单击链接、表单上提交按钮或下拉列表中触发服务器调用项。路由器绑定到内部位置更改事件,并从客户端处理导航到新请求路径整个过程。...路由器实现是通过 SPA 框架(其中 Angular 最为出色)移动到客户端。让我们花点时间对合并 Angular 路由器和仍在使用 Blazor 路由器中功能进行简要比较。...但是,在 Blazor 中,路由器可以在不离开客户端情况下进行导航,无需服务器完全重新加载内容。 缺少功能 Blazor 框架是一个极具吸引力软件,但很多功能仍然在开发中。...可以在 bit.ly/2TtY0DP 查看团队跟踪 Blazor 路由系统增强功能。

    8.4K21

    Angular 英雄示例教程

    创建 Angular 组件Angular components)以显示英雄详情,并显示一个英雄数组。 为只读数据使用单向数据绑定。 添加可编辑字段,使用双向数据绑定来更新模型。...创建共享服务来管理这些英雄。 使用路由在不同视图及其组件之间导航。 你将学到足够 Angular 知识和足够信心来让 Angular 提供你所需支持。...单击 "Back(返回按钮)",应用将会让你返回到 Dashboard(主面板)页面中。顶部链接能够让你在任何时候都能够返回到主页面。...如果你单击  "Heroes(英雄列表)",引用将会将英雄以列表显示。 当你单击不同英雄名字时候,一个只读“微型详情视图”会在列表下方显示,以体现你选择。...你可以点击 “View Details(查看详情)” 按钮进入所选英雄编辑视图。 下面这张图汇总了所有可能导航选项。

    1.5K30

    如何使用WijmoJS 纯前端设计器,快速生成 Angular 应用

    安装它最简单方法是打开VS Code并转到Extensions窗格。 在搜索框中键入wijmo,然后单击“安装”按钮开始下载扩展。 出现时单击重新加载按钮以完成安装。...如果您已经下载了WijmoJS,则可以在Samples \ TS \ Angular2 \ HeaderFilters \ HeaderFilters文件夹中找到此项目。...但是,您应该知道扩展会记住调用它Angular标记文档范围。 如果随后修改了原始源文件,则应重新访问CodeLens链接以刷新关联设计器选项卡。...接下来,单击图例属性齿轮图标,并将其位置设置更改为“底部”。 像以前一样单击后退按钮返回FlexChart设置。 通过将其标题属性设置为Most Active,为图表添加标题。...例如,您可以通过添加适当类型新系列元素,轻松地将趋势线添加到图表中。 在“属性”窗格中向下滚动,找到系列属性,然后单击“显示项目”按钮将其展开。

    5.4K40

    IntelliJ IDEA 2022.2.2汉化版免登陆账号「winmac」

    2、编辑- 跳转到闭合括号/引用Tab现在,在键入时,您可以使用Tab在结束括号或结束引号之外导航。...直接触摸栏运行,构建和调试项目,提交更改并更新项目。IntelliJ IDEA按钮显示在Touch Bar界面中间应用程序特定区域中,它们取决于上下文或您按下修改键。...8、JavaScript和TypeScript- 提取并转换React组件使用新Extract Component重构来创建新React组件,方法是现有的渲染方法中提取JSX代码。...您还可以通过使用新意图将React类组件转换为功能组件,反之亦然。- 查找未使用代码您现在可以使用新代码覆盖功能在客户端找到未使用JavaScript代码(或TypeScript代码)。...您可以通过从过程上下文菜单中选择“ 执行”操作来运行过程,也可以在打开源代码时单击工具栏中“运行”按钮来运行过程。

    4.7K30
    领券