标签: angular4-router

我为我的angular 4应用程序设置了一个简单的路由,包括使用Tetradata Covalent和Angular Material创建的sidemenu我正在使用这个Angular 2/4身份验证教程来处理登录,但所有子路由器链接都重定向到默认页面(仪表板).任何帮助或建议将受到高度赞赏.

app.routing.ts

export const APP_ROUTES: Routes = [
  {path: 'login', component: HomeComponent},
  { path: '', redirectTo: 'mainpage', pathMatch: 'full' },
  { path: '**', redirectTo: 'mainpage' },
  {
    path: 'mainpage',
    component: MainPageComponent,
    canActivate:[AuthGuard],
    children: [
      {path: 'order', component: OrderComponent},
      {path: 'dashboard', component: DashboardComponent},
      {path: 'stock', component: StockComponent},
      {path: 'Report/sales', component: SalesComponent},
      {path: '', redirectTo: 'dashboard', pathMatch: 'full'}
      {path: '**', redirectTo: 'dashboard', pathMatch: 'full'}
    ]
  }
];

page.component.html

<td-layout>
  <td-navigation-drawer flex sidenavTitle="EzyAgric" …

我想知道是否有与角组件功能（特别是单击事件）等效的路由防护。

我们已经设置了一个路由保护程序，可以在未登录时打开登录页面。这很好用。问题是，我们有一个不需要身份验证即可查看的组件，但是该组件中的某些功能确实需要身份验证。例如，新闻列表，但上/下按钮需要进行身份验证才能使用。

上/下按钮只是触发组件功能的单击事件。我们可以采用在自定义路由保护程序中使用的逻辑，并将其添加到这些函数中，但这会导致大量重复代码。

我想知道Angular是否内置可以解决这个问题的东西。我在考虑类似于ASP.NET MVC的[Authorize]属性，您可以将其放在要进行身份验证的操作的顶部。据我所知，路由守卫仅适用于路由，而不适用于单击事件。

我正在尝试在 Angular 4 应用程序中使用 Angular Routes，但该应用程序无法加载与请求的路由匹配的组件：

这是app-routing.module.ts：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent },
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.module.ts 看起来像这样：

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

import { AppComponent } from './app.component';
import …

我想做什么

我正在尝试在我的应用程序中创建一个路由，我想允许管理员输入 url 作为

http://localhost:4200/#/start/referral_code=jk

然后在组件内部获取referral_codeie的值jk。

在我的路线中，我将路线定义为

{ path: 'start/:referral_code', component: StartPageComponent },    

我想要实现的是，当管理员输入上面提供URL的内容时，referral_code应该在指定的组件内接收变量的值StartPageComponent。我在里面添加了以下内容ngOnInit()如下

this.activatedRoute.params.subscribe((params: any) => {
      if (params) {
        let refCode = params.referral_code;
        console.log(refCode);
      }
    });

实际发生的事情

一旦我在上面输入，URL后面的部分就=被删除了=，结果网址更改为

http://localhost:4200/#/start/referral_code

并在组件内部console.log(refCode);显示字符串referral_code而不是referral_codeie的值jk。

局限性

我不能使用QueryParams，http://localhost:4200/#/start?referral_code=jk也不能更改 urlhttp://localhost:4200/#/start/referral_code=jk

我很感激任何帮助。

如何在点击 angular 4 的浏览器后退按钮时提醒用户？

onpopstate 即使在第一次加载页面时也会被调用

import {  PlatformLocation } from '@angular/common';

    constructor( private platformLocation: PlatformLocation) {
        platformLocation.onPopState(() => {
          console.log("onPopState called");
          window.alert("your data will be lost");
        })
    }

新的路由与角4/5,我在他们的网站上遵循角度教程.我有一个角度应用程序,我希望能够有两个单独的页面.现在主页是localhost:8870/dr3-interface,我想要一个新组件的新页面localhost:8870/dr3-interface/manage_cycles_instances

我的问题是,当我点击我的链接时,Manage cycles instances它会显示我的所有app.component组件,而不仅仅是我决定在我的组件上显示的组件/manage_cycles_instances.我试图隐藏它们*ngIf但没有结果.有任何想法吗？

app.component.html:

<div style="text-align:left">
  <h1>{{ title }}</h1>
</div>

<nav>
  <a routerLink="/manage_cycles_instances" routerLinkActive="active"> Manage cycles instances</a>
</nav>
<router-outlet></router-outlet>

<div *ngIf="router = '/dr3-interface'">
  <h2><d-table></d-table></h2>
</div>
<br/>
<form-upload></form-upload>
<br/>
<list-upload></list-upload>

app-routing.module.ts:

import { NgModule }              from '@angular/core';
import { RouterModule, Routes }  from '@angular/router';

import { DataTableComponent }   from './datatable/data-table.component';


const appRoutes: Routes = [
  { path: 'manage_cycles_instances', component: DataTableComponent },
  /* TO DO : page error
  { path: …

我要做的是在另一个选项卡或弹出窗口中打开路由器导航的目标。我的指示是这样的：

private router: Router;
this.router.navigate(['/page', id]);

在路由中，我有：

 const routes: Routes = [
{
    path: '',
    component: LayoutComponent,
    children: [
        { path: 'page', loadChildren: './page/page.module#PageModule' }
    ]
}
];

我想在另一个标签或弹出窗口中打开此链接。我能做什么？

这是page.ts的代码

@Component({
 selector: 'app-etichetta',
 templateUrl: './page.component.html',
 styleUrls: ['./page.component.scss'],
 animations: [routerTransition()]
})
export class PageComponent implements OnInit {


 constructor(private router: Router,
    private route: ActivatedRoute,
    public appService: AppService) {
 }


 ngOnInit() {

 }
}

这是HTML：

<div [@routerTransition]>
  <br>
  <div class="row">

  </div>
</div>

我的app.module.ts

@NgModule({
.......
  providers: [
....
    { provide: LocationStrategy, useClass: HashLocationStrategy},
....
]
});

当我删除这部分时,它可以在我的localhost中工作但是在进行了构建 或ng构建--prod之后,当我刷新页面或h5时它不起作用.它给出了404错误.我想从我的网址中删除哈希(#).有解决方案吗

我有3个用户，当我单击“下一步”时，它必须为下一个用户加载路由，所以我将一个添加到ID并传递给routerLink，但以某种方式而不是添加它来连接数字，以下是代码

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute,Params } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';
@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit,OnDestroy {
  routeSubscription : Subscription;
  id : number;
  next :  number = 0;
  constructor(private route:ActivatedRoute) { 
  }

  ngOnInit() {
  this.routeSubscription =  this.route.params.subscribe((params :Params) =>{
    this.id = params['id'];
    this.next = this.id  + 1;
  });
  }
  ngOnDestroy(){
    this.routeSubscription.unsubscribe();
  }
}

HTML模板

<p>
  user id : {{ id }}
</p> …

这是我的路线：

{ path: 'market/:currency', component: MainlayoutComponent, canActivate: [AuthGuard]}

我想重定向到这样的查询参数：

市场/ btc？sidebar = home

<a [routerLink]="['/market', currency]" [queryParams]="{sidebar: 'home'}"></a>

但是当我单击其重定向市场/ BTC

有什么问题。

编辑中

这段代码有效，我还有另一个错误，但我解决了。