标签: routerlink

在我的 Angular 2 应用程序中，我有一个选项卡区域，用户可以在其中从一组独立但上下文相关的组件中进行选择。当他们点击这些链接之一时，相关组件会根据 routerLink 中定义的内容加载，如下所示：

<a class="page-content-header-item" routerLink="/page1" routerLinkActive="selected">Page 1</a>

这工作得很好。但是，从那时起，我们构建了应用程序以将各种用户选择的过滤器选择保存为 URL 中的参数。这样，当他们重新加载组件时，他们最近的选择仍然可见并应用于数据。因此，在用户进行了一些过滤器选择后，URL 可能如下所示：

http://somesite.com/page1;language_filter=true;language_selection=English

用于此的组件代码如下所示：

public changePage(page, value, type, body)
{
    this.onUserSelection(value, type, body, page);

    this.route.params.subscribe(
        (params: any) => {
            this.page = params['page'];
            this.language_filter = params['language_filter'];
            this.language_selection = params['language_selection'];
        }
    );
    this.router.navigate(
        ['/page1', {
            page: page,
            language_filter: this.language_filter,
            language_selection: this.language_selection,
        }]);
}

这适用于主要导航方法，这些方法是通过路由文件完成的，其中每个方法如下所示：

{ path: 'page1', component: Page1Component, canActivate: [AuthGuard], data: {contentId: 'page1'} }

但是，对于我提到的这个选项卡区域，它根据硬编码的 routerLink 参数加载组件。所以我现在意识到，当用户以这种方式返回到组件时，而不是通过我们提供的其他方式之一，它实际上覆盖了 URL 参数——因为它实际上是在加载“page1”——因为这个<a class="page-content-header-item" routerLink="/page1" routerLinkActive="selected">Page 1</a>

...因此之前添加的 URL 参数被删除。

所以，我的问题是，有没有办法编辑此代码： …

我有一个主页，用户在其中单击“ 联系我”以将其重定向到“ 联系”页面：

home.component.html

<div>
  <a routerLink="/contact" [queryParams]="sendOBj">Contact me</a>
</div>

home.component.ts：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '../../../node_modules/@angular/router';
import { FollowersService } from '../followers.service';

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

  myfollowers: any[]; 
  sendOBj: {id: any, name: any};

  constructor(private followers: FollowersService, private route: ActivatedRoute) { }

  ngOnInit() {
    this.myfollowers = this.followers.getFollowers();   
    this.sendOBj = {id: this.myfollowers[0].id, name: this.myfollowers[0].name };
  }

}

contact.component.ts：

import { …

我有 2 个链接到同一页面（定义页面）但具有不同 id 的路由器链接，在我的定义页面中，我有一个 if else 循环来检查 id，然后发布该 id 的适当定义。我的问题是我的循环无法正确读取我的 ID 并直接转到我的 else 语句，这是我让它工作的最接近的状态。

我在第 1 页中的 2 个路由器链接

<router-link :to="{ path: '/Pulse/Definition',id:'Alignment'}" v-bind:tooltip="Alignment" append><a >Read more ></a></router-link>
<router-link :to="{ path: '/Pulse/Definition'}" id="Trust" append><a >Read more ></a></router-link>

我的定义页面

<template>
    <div class="PulseDefinition page row">
        <h2 v-if=" id=='Alignment'">hello world {{id}}</h2>
        <h2 v-else-if=" id=='Trust'">hello world {{id}}</h2>
        <h2 v-else>Sorry try again</h2>
        
    </div>

</template>
<script>
export default {
    
}
</script>
<style scoped>
.PulseDefinition{
    margin-top:2.5rem;
    margin-left:3rem;
    background-color: aquamarine;
    width:50rem;
    height:50rem;
    
}
</style>

路由器

import Vue …

我想从一个 html 页面使用 routerLink 和 state 路由到另一个页面。使用标记没有问题，在登录页面的 ngOnInit 期间，我可以按预期检索状态。使用标签主页也可以导航，但状态结果未定义。

我怎么了？

登录页面的html

<button routerLink="/home" [state]="navExtra.state">
    Go Home Page via button
</button>
<a routerLink="/home" [state]="navExtra.state">Go Home Page via a</a>

登录页面的ts

import { Component, OnInit } from '@angular/core';
import { NavigationExtras } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss']
})
export class LoginPage implements OnInit {
  navExtra: NavigationExtras = {
    state: { data: { a: 'a', b: 'b' } }
  };
  constructor() {}

  ngOnInit() {}
}

首页的ts

import { Component, OnInit …

页面中没有路由。我在下面使用了HTML和配置代码。

<nav aria-label="Page navigation">
    <ul class="pagination pagination-plain">
      <li>
        <a href="review/words" aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
      <li [routerLinkActive]="['active']">
        <a [routerLink]="review/words">1</a>
      </li>
      <li [routerLinkActive]="['active']">
        <a [routerLink]="review/phrase">2</a>
      </li>
      <li>
        <a href="javascript:void(0)" aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
    </ul>
  </nav>

路由配置代码为

const appRoutes: Routes = [
  { 
    path: '', 
    component: IndexComponent,
 },
 { 
    path: 'index', 
    component: IndexComponent,
 },
 { 
    path: 'review/words', 
    component: WordsComponent,
 },
 { 
    path: 'review/phrase', 
    component: SentenceComponent,
 }
];

当我在分页链接中单击“ 1”或“ 2”时，出现以下错误。

错误错误：未捕获（承诺）：错误：无法匹配任何路由。URL段：'review / phrase / NaN'错误：无法匹配任何路由。网址段：ApplyRedirects.noMatchError（router.es5.js：1404）的[review / phrase / NaN]在CatchSubscriber.selector的[角度]（router.es5.js：1379）在CatchSubscriber.error的[角度]（catch.js） ：104）在MapSubscriber.Subscriber._error（Subscriber.js：128）的[angular]在MapSubscriber.Subscriber.error（Subscriber.js：102）的[Angular]在MapSubscriber.Subscriber._error（Subscriber.js：128）的[angular] ）[Subscriber.Subscriber.error（Subscriber.js：102）的[Angular] …

有一个包含所有组件的模块和一个路由模块。

路由模块：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserComponent } from './user/user.component';
import { AdminComponent } from './admin/admin.component';
import { AdminDishesComponent } from './admin/adminDishes/adminDishes.component';
import { AdminCategoriesComponent } from './admin/adminCategories/adminCategories.component';

const appRoutes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'user'
  },
  {
    path: 'user',
    component: UserComponent
  },
  {
    path: 'admin',
    component: AdminComponent,
    children: [
      {
        path: 'dishes',
        component: AdminDishesComponent
      },
      {
        path: 'categories',
        component: AdminCategoriesComponent
      }
    ]
  }
]; …

<div class="menuItem mb-3" *ngFor="let menuItem of menuItems">
    <a routerLink="{{menuItem.link}}" routerLinkActive="active">
        <img src="{{menuItem.icon}}" alt="{{menuItem.name}}" />
        <p class="text-center f-12">{{menuItem.name}}</p>
    </a>
</div>

在激活的路由器链接上，我想更改{{menuItem.icon}}为{{menuItem.iconAtv}}

  <nav>
    <a routerlink="/students"><button mat-stroked-button class="button"><mat-icon class="icon">face</mat-icon><br><br><br>students</button></a>
  </nav>

const routes: Routes = [
  {path: 'students', component: StudentsComponent},
];

角度路由器链接不起作用。还导入了 RoutingComponent app.module 等。

我正在尝试从导航栏链接我的登录页面.这就是我对navbar的看法:

<div class="navbar-container">
  <ul id="slide-out" class="side-nav center-align">
    <li>
      <div class="user-view center-align">
        <a><i class="medium material-icons close-button">close</i></a>
      </div>
    <li><a routerLink="../login">Login</a></li>
  </ul>
  <a href="#" data-activates="slide-out" class="button-collapse"><i class="small material-icons {{updateMe()}}">filter_list</i></a>
</div>

这是我的文件结构:

但是,它只是没有链接到组件.我得到的错误是:

core.js:1542 ERROR错误:未捕获(在承诺中):错误:无法匹配任何路由.网址细分:'登录'

我使用相对路径错了吗？我怎样才能解决这个问题？谢谢!