从angular 2/4中的另一个组件通过单击按钮重新加载组件
在Angular 2/4中，可以通过单击按钮重新加载另一个组件。这可以通过以下步骤实现：
- 首先，在Angular应用程序中创建两个组件，例如ComponentA和ComponentB。
- 在ComponentA的模板中，添加一个按钮，并绑定一个点击事件。
- 在ComponentA的组件类中，定义一个方法，该方法会在按钮点击时被调用。
- 在该方法中，使用Angular的路由器（Router）导航到ComponentB。
以下是一个示例代码：
在ComponentA的模板中：
<button (click)="reloadComponentB()">重新加载ComponentB</button>在ComponentA的组件类中：
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中的另一个组件通过单击按钮重新加载组件的解决方案。希望对您有帮助！
相关·内容
我有一个组件(componentA)，它在它的HTML中使用了另一个组件(componentB)。ComponentB有一个按钮，它的标题是其他东西，但我想在ComponentA中更改该按钮的名称。 ComponentA使用componentB按钮导航到另一个页面，但ComponentB有打开表单的按钮。导航和一切工作，但我只是想改变名称的按钮时，它在不同的页面。 ComponentA.html <div>
<component-b (click)="buttonEdit()"></component-b>
</div>
浏览 31提问于2019-10-02得票数 2
回答已采纳
2回答
我正在构建一个在角11中的示例程序，其中我有一个应用程序组件和一个显示组件。在app组件中，有两个按钮English &，单击“导航到**Show ** &并在App 中以英语/日语显示文本(取决于单击按钮)。
问题：问题当我单击日语或英语按钮时，它会被导航到Show组件并以语言(例如:英语)显示文本，但当我单击日语按钮时，它什么也不会做。在控制台中，它将语言显示为日语，但在前端却什么也没有显示。
app.component.html
<h4>App Component</h4>
<button (click)="showComponent
浏览 1提问于2021-03-09得票数 0
回答已采纳
我有一个像这样结构的应用程序。
<app>
<header>
<component-a></component-a>
</header>
<div>
<router-outlet></router-outlet>
<component-b></component-b> <!-- loaded through router -->
</div>
</app>
在component-b中
浏览 3提问于2016-04-29得票数 3
回答已采纳
我有这样的事情：
我的组件
<ComponentA></ComponentA>
<ComponentB></Componentb>
import { Component, OnInit } from "@angular/core";
@Component({
selector: "component",
templateUrl: "<button (click)=""></button>" //I need call
浏览 4提问于2020-03-16得票数 0
我面临以下问题： 我们有不同的组件，这些组件被加载到应用程序的iframe中。现在我也想通过选择器标签以一种嵌入式的方式使用其中一个组件。 因此给定的是一个ComponentA： @Component(
{
selector: 'a',
templateUrl: './a.component.html',
..... 在ModuleA中： const routes: Routes = [
{ path: '', component: AComponent},
];
@NgModule({
dec
浏览 42提问于2021-09-13得票数 0
1回答
我有一个使用标签模板的Ionic项目设置。下面是我的问题:我有一个活动选项卡，页面上有3个按钮：
朋友
靠近我
全局
当页面第一次加载时，它将显示朋友的帖子列表，当我点击“接近我”按钮时，它应该用“接近我”的帖子取代“朋友”的帖子。这个很好用。当我单击“老友记”时，它不会更改页面上的内容。URL会更改，但内容不会更改。
tabs.router.module.ts：
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
浏览 3提问于2018-12-20得票数 0
回答已采纳
我有以下结构: app.component.html包含以下组件：
<componentA>
<router-outlet></router-outlet>
我将componentB注入路由器插座，componentB有自己的路由器插座。
<componentB><router-outlet></router-outlet></componentB>
我在ComponentB的路由器插座中注入componentC
<componentC>
我想从ComponentA发送一个事件到ComponentC
浏览 2提问于2016-08-24得票数 5
回答已采纳
如果我通过.append来附加这个组件，而不是在模板中使用标记名，我想知道为什么不能调用web组件中定义的方法。下面我举几个例子。一个不起作用(抛出一个错误)。我不知道为什么第一个例子是抛出这个错误。
示例1
const templateB = document.createElement('template');
templateB.innerHTML = `
<h1>ComponentB</h1>
`
class ComponentB extends HTMLElement {
constructor() {
super();
浏览 2提问于2021-11-17得票数 0
回答已采纳
1回答
在Angular 4应用中使用以下结构：
ComponentA从服务获取以下模型：
class ViewModel {
public someBool: boolean;
public someNumber: number;
public someArray: CFlightClassQuote[];
public someOtherNumber: number;
public someString: string;
}
ComponentA类：
e
浏览 2提问于2017-11-03得票数 1
我的角9应用程序有一个CustomErrorHandler和一个ErrorPageComponent。当在整个应用程序中抛出任何异常时，CustomErrorHandler将告诉路由器导航到ErrorPageComponent。但是，ErrorPageComponent内部有一个按钮可以抛出自己的异常，在这种情况下，我希望CustomErrorHandler仍然告诉路由器导航到ErrorPageComponent，这是正常的。但是，当ErrorPageComponent以这种方式被路由到自身时，它需要再次调用它的初始化方法。
通常，如果希望组件在路由到自身之后调用初始化方法，则只需订阅路由事件
浏览 1提问于2020-06-27得票数 4
回答已采纳
1回答
我使用的是角5.1.0，我对路由系统有一个问题，让我解释一下：
在我的应用程序路由模块中，我有一个url /api来加载另一个模块，在这个延迟加载的模块中，我有了下一个路由实现：
api-routing.module.ts
const routes: Routes = [
{
path: '',
component: ApisComponent,
data: {
breadcrumbs: 'APIs',
},
children: [
{
path: '',
浏览 0提问于2018-01-18得票数 9
回答已采纳
当我给出路由器导航数据没有在路由器page.But中更新时，当我刷新浏览器时，更新的数据可以显示在路由器页面.i中，只想重新加载组件。我尝试了路由器导航，首先导航到虚拟组件，然后导航到路由器page.is，还有其他更好的方法吗？
import { Component, OnInit } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { Appsettings } from '../../../app.s
浏览 0提问于2017-11-07得票数 0
我有一个非常简单的示例应用程序，有一个选项卡控件。我希望在选择选项卡时显示组件A或组件B。这应该很容易由vue路由器处理，但我不知道我的配置有什么问题。
当我单击任一选项卡按钮时，什么都不会发生。我的部件都不显示。
我遗漏了什么？
main.js
import Vue from 'vue';
import {
Tabs,
} from 'buefy';
import 'buefy/dist/buefy.css';
import App from './App.vue';
import './registerServic
浏览 3提问于2020-08-27得票数 0
回答已采纳
我想使用路由器从另一个组件重新加载页面组件。 我试着通过下面的变通方法重新加载页面。它正在工作，但效率不是很高。 this.router.navigateByUrl('/SampleComponent', {skipLocationChange: true}).then(()=>{
this.router.navigate([page]);
}); 我们有没有其他方法来重新加载页面？
浏览 21提问于2019-05-09得票数 0
回答已采纳
我正在尝试导航到当前组件中的另一个组件，如下所示： this.router.navigate(['/relationshipInfo']); 上面的语句没有路由到不同的组件，下面是我在app-routing.module.ts中的代码： import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {PersonalInfoComponent} from './PersonalInfo/Pe
浏览 7提问于2020-04-22得票数 3
回答已采纳
我有一张表格。当用户开始键入时，它会自动保存，并返回一个id。我使用这个id来更新url。
因此，在我们开始输入之前，url是/arende，表单后面的modell被实例化为空。在进行了第一次保存并返回id之后，url被更新为/arende/666，其中666是通过使用location.go()获得的id。
当我想要“重置”表单时，问题就出现了，我想要导航回/arende，并通过这样做来重置modell。
这不起作用，navigateByUrl在这一点上似乎没有做任何事情。如果我用已经在url i.e /arende/123中的id打开浏览器，然后按navigateByUrl，它就可以工作了，
浏览 1提问于2018-01-18得票数 1
我试图导航到角度6中的另一页。
在Ionic中，我们通过调用navCtrl.push('ExamplePage')来实现它；
在第六角中，我知道它们是路线，但我不能使用这样的按钮导航：
app.component.html
<button (click)='goToExamplePage()'>ExamplePage</button>
<router-outlet></router-outlet>
app.component.ts
import {Router} from '@angular/router
浏览 1提问于2018-09-20得票数 3
假设我有一个路由器条目为：ModuleA：
path: 'modulea',
loadChildren: './modulea/modulea.module#ModuleA'
ComponentA (ComponentA的选择器是component-a)
路由器条目为：ModuleB：
path: 'moduleb',
loadChildren: './moduleb/moduleb.module#ModuleB'
ComponentB (ComponentB的选择器是component-b)
ComponentA的模板有<
浏览 0提问于2018-06-24得票数 0
回答已采纳
设想情况：
我有一个导航组件，根据单击哪个链接，导航到两个组件中的任何一个。对于写入组件，我首先显示一个带有卡片的网格列表。当单击卡片时，网格列表由显示组件交换，该显示组件通过写组件的路由器出口显示。到目前为止一切都很好但是..。
我期待的是：
用户再次单击该导航按钮，并再次显示卡片的网格列表。
实际发生了什么：
什么都没显示出来。再次导航到写入组件后，路由器出口仍然是黑色的。当我单击另一个导航按钮，从而加载待办事项处理组件，然后再次单击写入导航按钮时，网格列表将正常加载。
navbar-component.html：
<mat-toolbar class="navbar nav
浏览 2提问于2022-06-29得票数 0
几天前，我开始学习Angular，并尝试做一个简单的SPA。我已经为它们添加了2个组件和布线： const appRoutes: Routes = [
{path: 'main', component: MainPageComponent}, //default page
{path: 'registration-form', component: RegistrationPageComponent}, //"another" page
{path: 'login-form', component: LoginPag
浏览 10提问于2020-05-01得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
