angular2-routing 相关问题

Angular Routing是一种内置功能，使您可以创建单页面应用程序（SPA）用户界面，用户可以在该界面中导航到不同的视图，而无需每次都从服务器重新加载整个页面。

由于我是 Angular 2/4 的新手，我在根据我的需要设置新应用程序时遇到了困难。我正在尝试构建一个应用程序，该应用程序将从另一个应用程序中调用。打电话

angular angular2-routing

回答 5 投票 0

这个问题很简单，但我无法摆脱它。我在父模板中有一个，当通过路由模块显示子模板时，我需要它消失。我所期待的是这个问题很简单，但我就是摆脱不了。我在父模板中有一个<header>，当通过路由模块显示子模板时我需要它消失。我期望的是在 header 标签中添加一个类，这样我就可以通过 CSS 隐藏它。这就是我拥有的： app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app', template: ` <header [class.hidden]="hide"> <h1>My App</h1> <ul> <li><a href="/home"></a></li> <li><a href="/showoff"></a></li> </ul> </header> <router-outlet></router-outlet> ` }) export class AppComponent { hide = false; // <-- This is what I need to change in child component } app-routing.module.ts import { RouterModule, Routes } from '@angular/router'; import { HomeComponent } from './welcome.component'; import { ShowOffComponent } from './show.off.component'; const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'showoff', component: ShowOffComponent }, ]; export const AppRouting = RouterModule.forRoot(routes, { useHash: true }); show.offf.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-showoff', template: ` <h2>Show Off</h2> <div>Some contents...</div> ` }) export class ShowOffComponent { hide = true; // <-- Here is the problem. // I don't have any idea how to reach parent variables. } 您可以使用输出发射器在您的子组件中， import { Component } from '@angular/core'; @Component({ selector: 'app-showoff', template: ` <h2>Show Off</h2> <div>Some contents...</div> ` }) export class ShowOffComponent { @Output() onHide = new EventEmitter<boolean>(); setHide(){ this.onHide.emit(true); } } 在家长中， export class AppComponent { hide = false; changeHide(val: boolean) { this.hide = val; } } 使用该事件发射器向父级添加子级， <app-showoff (onHide)="changeHide($event)"></app-showoff> 我最近在 Angular 6 中遇到了同样的现象。我想访问和更改属于父组件或祖父组件的变量。请参见下图。我想访问和更改属于 Tom 的变量，来自 Jim（Tom 的孩子）和 Sara（Tom 的孙子）。可能还有其他一些解决方案，但我用来克服这个问题的方法是使用ViewContainerRef。我必须将 ViewContainerRef 注入到子组件的构造函数中，我需要访问父组件并遍历父节点（或多个节点）以查找父变量。注入构造函数， constructor(private viewContainerRef: ViewContainerRef) { } 访问并遍历到父节点， getParentComponent() { return this.viewContainerRef[ '_data' ].componentView.component.viewContainerRef[ '_view' ].component } 我用上图中给你的场景制作了一个 StackBlitz 示例。 https://stackblitz.com/edit/angular-comms 在您的 app.component.ts 中，您可以检查您的 URL 并设置 hide 变量值，如下所示： import { Component } from '@angular/core'; import { Router, NavigationStart } from '@angular/router'; @Component({ selector: 'app', template: ` <header [class.hidden]="hide"> <h1>My App</h1> <ul> <li><a href="/home"></a></li> <li><a href="/showoff"></a></li> </ul> </header> <router-outlet></router-outlet> ` }) export class AppComponent { hide = false; // <-- This is what I need to change in child component constructor(private router: Router){} public ngOnInit() { this.router.events.subscribe((events) => { if (events instanceof NavigationStart) { if (events.url === '/' || events.url === '/home') { this.hide = false; } else { this.hide = true; } } }); } } 不太直接，但（恕我直言）更准确地实现这一目标的方法是使用服务。创建parent-to-child.service.ts 文件并创建主题属性导出类 ParentToChildService { 显示标题=新主题（）； } 通过父组件和子组件中的构造函数将其注入：构造函数（私有 ptcService：ParentToChildService ）{} 使用 ngIf（或者你可以使用 ngClass，如果你坚持使用 CSS 方法）将标头组件绑定到其 TS 文件中的属性： html: <header *ngIf="showStatus"> TS：showStatus: boolean = true; // true by default ptcSubscription: Subscription; 在标头组件的 ngInit 上订阅该主题： ngOnInit(): { this.ptcSubscription = this.ptcService.showHeader.subscribe( （新状态：布尔值）=> { this.showStatus = newStatus }); } ）； } 在您的子组件中，每当您需要隐藏 <header> 时，请在服务主题上调用 next： this.ptcService.showHeader.next(false); //隐藏标题

angular angular2-routing angular-components

回答 4 投票 0

Angular2 RC5 模拟激活的路由参数

我需要能够模拟激活的路由参数才能测试我的组件。这是迄今为止我最好的尝试，但它不起作用。 { 提供：ActivatedRoute，useValue：{ params：[ { 'i...

angular typescript angular2-routing angular2-testing

回答 3 投票 0

Angular 2 模块延迟加载不起作用

我试图通过构建一个包含两个部分的网站基本结构来了解 Angular 2 (RC5) 模块的延迟加载（想想登录页面和主网站）。我已经设置好了...

angular lazy-loading angular2-routing angular-module

回答 2 投票 0

在 Angular 2 中找不到要加载的主要出口（登录页面和所有其他页面）

在app.component.html中，我设置了一个条件来决定使用哪种模板：在app.component.html中，我设置了一个条件来决定使用哪种模板： <div *ngIf="_appService.titleName !== 'Login'"> <router-outlet></router-outlet> </div> <div ngIf="_appService.titleName === 'Login'"> <login></login> </div> 我试图在用户登录后将其重定向到应用程序的主页。为此，我使用以下方法： this._appService.titleName === 'Main page'; this._router.navigate(['/']); 通过使用这个我得到这个错误： Cannot find primary outlet to load 'MainComponent' 这让我感到不安，因为我以另一种方式进行了完全相同的注销操作（从主页重定向到登录页面），并且一切正常。我读了一些类似的答案，但到目前为止没有一个对我有帮助，因为我不想在我的 router-outlet 中添加 login.component.html 标签，因为主页不是登录页面的子组件。我认为我的问题是我应该使用两个 router-outlet 而不是登录选择器，但我无法让它正常工作。我的app.routing.ts： const appRoutes: Routes = [ { path:'login', component: LoginComponent }, { path: 'main', component: MainComponent, canActivate: [AuthGuard] }, { path:'', redirectTo:'/main', pathMatch:'full' }, { path: '**', redirectTo: '' } ]; export const appRoutingProviders: any[] = []; export const routing = RouterModule.forRoot(appRoutes); 请勿在模板中使用 this： <div *ngIf="_appService.titleName !== 'Login'"> <router-outlet></router-outlet> </div> <div ngIf="_appService.titleName === 'Login'"> <login></login> </div> 您可以使用命名路由器插座 <div *ngIf="_appService.titleName === 'Login'"> <router-outlet name="login"></router-outlet> </div> 和路线 { path:'login', component: LoginComponent, outlet: 'login' }, 有关更多信息，请参阅如何添加辅助路由。

angular angular2-routing angular2-template router-outlet

回答 2 投票 0

Angular 4 中 CSS 框架的有条件使用

我尝试在同一项目应用程序中为我的管理模块集成一个特定的 CSS 框架（材料设计），并为我的用户模块集成另一个 CSS 框架。如果可以的话我该怎么办。

angular angular2-routing angular-cli mean-stack angular-template

回答 1 投票 0

为什么两个守卫的交互会导致 Angular 18 中的无限重定向循环？

我有路线“/”和“/auth”。逻辑是未登录的用户只能访问 /auth 页面，而登录的用户无法访问它。所以，我做了两个守卫，出于某种原因我得到了无限......

angular single-page-application angular2-routing angular-router-guards

回答 1 投票 0

使用 onsubmit 事件刷新页面来处理 Angular 2 和 Firebase

我正在尝试将 Firebase 应用于我昨天找到的管理 HTML 模板。在注册页面中，当我单击“登录”时，它会重新加载页面，而不是执行 Firebase createUserWithEmailAnd...