标签: angular-routerlink

我开发了 Angular 8 应用程序，我正在使用 routerLink 来导航组件，这些组件工作正常，没有任何问题，但是当我直接在浏览器中输入相同的 URL 时，它没有显示任何内容，并且在控制台中，我看到了错误如下

例如，我打开主页http://localhost:4200/home并在此处添加了 routerLink 以转到http://localhost:4200/about并且我将能够成功查看但如果我输入 URL http ://localhost:4200/about直接在 ULR 里什么都没有显示

我已经处理了 app-routing.model.ts

const routes: Routes =
    [
        { path: 'home', component: HomeComponent },
        { path: 'about', component: AboutComponent },
        { path: '**', redirectTo: '/home', pathMatch: 'full' }
    ];
    @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})

我有 header.component.ts 来处理导航栏，所以我 <router-outlet></router-outlet>在 header.component.html 中添加了<app-header></app-header>，然后在app.component.ts 中包含了 header.component.ts 的选择器，然后在最后的index.js 中包含了 header.component.ts 的选择器 。 html 我已经包含了 app.component.ts 的选择器，即<app-root></app-root>

你能告诉我是否有问题。

在问这个问题之前，我已经经历了下面的一切，没有任何帮助

1. RouterLink 不起作用 …

我可以像page1/id1Ionic 5 一样通过路由获取单个参数。如果我想获取模块的多个参数，我该怎么做？

我正在尝试使用锚标记中的片段在页面内重定向。第一次它工作正常，但是当我手动向上滚动页面并再次按锚链接时，它不起作用。

<a class="nav-link page-scroll" [routerLink]="['/']" fragment="home">Home</a>
<a class="nav-link page-scroll" [routerLink]="['/']" fragment="about">About</a>

我已将我的代码上传到StackBlitz

单击“关于”，您将看到页面滚动。手动向上滚动并再次按“关于”，这次不会发生任何事情。我期待您关于如何解决此问题的建议。

我正在使用routerLink返回我的页面.

目前的路线可以有3个级别:

myurl.com/parent
myurl.com/parent/child
myurl.com/parent/child/grandchild

另外,我有一些不同的组件,因此它不会总是父组件,它可以是parent1,也可以是parent2,也可以是子组件和孙子组件,例如:

myurl.com/parent2/child1/grandchild2

我想要的是总是去上一级,例如:

myurl.com/parent/child/grandchild -> myurl.com/parent/grandchild

我做的是:

<button [routerLink]="['../'']">
       back
</button>

但它总是导航到"myurl.com"

我怎么解决呢？

正如一些用户建议的那样,我正在分享我的路由配置:

在app.routing.ts中:

const APP_ROUTES: Routes = [
{
  path: '',
  canActivate: [LoggedInGuard],
  children: [
    {path: '', redirectTo: '/mainPage', pathMatch: 'full'},
    {path: 'parent', loadChildren: 'app/parent/parend.module#ParentModule'
]},
{path: '**', redirectTo: ''}
];

在parent.routing.ts中:

const PARENT_ROUTES: Routes = [
 {path: '', component: ParentComponent},
 {path: ':id', component: ChildComponent},
];

如果在浏览器中我写道:

myurl.com/parent -> it works

但单击后退按钮失败

我希望有这样的路线:www.test.com?procesId=12.

这是我目前的routerLink:

但是现在我得到了这个价值:

www.test.com/123

任何建议我怎么可以在网址中添加?procesId = 12有routerLink？

我试过了:

但我没有在网址中得到问号,我也得到一个错误:

无法匹配任何路线.

我知道当我使用params时我可以得到问号,但我想将它与routerLink一起使用,因为这就是他们在这个项目中使用它的方式.

我正在尝试使用以下代码为我的菜单栏应用或突出显示导航路线，我可以得到的是，我可以突出显示子菜单，但无法突出显示父菜单栏。

<li class="nav-item dropdown"><a
                        class="nav-link dropdown-toggle " id="navbarDropdownMenuLink"
                        data-toggle="dropdown" style="color: white; cursor: pointer;"
                        [routerLinkActive]="['class1']">Parent</a>
                        <div class="dropdown-menu dropdown-menu-left"
                            aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" 
                                [routerLink]="['app-child1']"
                                [routerLinkActive]="['class1']"
                                >Child 1</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" 
                                [routerLink]="['app-child2']"
                                [routerLinkActive]="['class1']"
                                >Child 2</a>
                        </div>
</li>

CSS类：

.class1{
    background-color: #007bff;
}

我是 Angular 测试的新手，目前我正在尝试测试这段代码，但我收到有关 DOM 上引发的事件的错误：

<li class="list-group-item" *ngFor="let user of users">
  <a class="test-link"[routerLink]="['/detail', user.id]">
    {{user.userName}}
  </a>
</li>

测试文件：

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [AdminComponent, UserDetailComponent],
    imports: [HttpClientModule,RouterTestingModule.withRoutes([
      {path:'detail/:id',
        component: UserDetailComponent}],
    )],
    providers: [UserService, AuthService]
  })
    .compileComponents();
}));

beforeEach(() => {
  router = TestBed.get(Router);
  location = TestBed.get(Location);

  fixture = TestBed.createComponent(AdminComponent);
  debugElement = fixture.debugElement;
  component = fixture.componentInstance;
  fixture.detectChanges();

});

it('test demands redirection', fakeAsync(() => {

  debugElement
    .query(By.css('.test-link'))
    .nativeElement.click();

  tick();

  expect(location.path()).toBe('/detail/testing/1');

}));

为什么本机元素上的点击事件为空？

我的路由是

{
path:'contacts/:id',
component: contactDetail
}

在

canActivateChild( route: ActivatedRouteSnapshot,
state: RouterStateSnapshot) { 
  console.log(state.url); 
}

state.url返回/contacts/1我需要的是匹配的url/contact/:id是否有可能获得匹配的url？

我想从一个 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 …

<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}}