Angular获取路由路径-未解析的url
Angular获取路由路径-未解析的URL是指在Angular应用中获取当前路由的路径，包括未解析的URL参数。在Angular中，可以使用ActivatedRoute服务来获取当前路由的信息。
ActivatedRoute服务提供了一个snapshot属性，它包含了当前路由的静态信息，包括路由路径、参数等。通过snapshot属性，可以获取到未解析的URL路径。
以下是一个示例代码，演示如何使用ActivatedRoute服务获取未解析的URL路径：
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
constructor(private route: ActivatedRoute) { }
ngOnInit() {
const url = this.route.snapshot.url.join('/');
console.log('未解析的URL路径:', url);
}
}在上述代码中，通过注入ActivatedRoute服务，并在ngOnInit生命周期钩子函数中使用snapshot属性获取未解析的URL路径。使用join('/')方法将路径中的各个部分连接起来，形成完整的路径字符串。
对于未解析的URL参数，可以使用params属性来获取。params属性返回一个Observable对象，可以通过订阅该对象来获取参数的值。
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.route.params.subscribe(params => {
console.log('未解析的URL参数:', params);
});
}
}在上述代码中，通过订阅params属性，可以获取到未解析的URL参数。params属性返回一个对象，其中包含了URL参数的键值对。
这是一个简单的示例，展示了如何在Angular中获取未解析的URL路径和参数。根据具体的业务需求，可以进一步处理这些信息，进行相应的操作。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：提供弹性计算服务，满足各种业务需求。
- 腾讯云云数据库 MySQL 版：高性能、可扩展的云数据库服务，适用于各种应用场景。
- 腾讯云对象存储（COS）：安全可靠的云端存储服务，适用于存储和处理各种类型的数据。
- 腾讯云人工智能：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等。
- 腾讯云物联网（IoT）：提供全面的物联网解决方案，帮助连接和管理物联网设备。
- 腾讯云区块链服务（BCS）：提供高性能、安全可靠的区块链服务，支持快速搭建和部署区块链网络。
- 腾讯云视频处理（VOD）：提供全面的视频处理服务，包括转码、截图、水印等功能。
- 腾讯云音视频通信（TRTC）：提供实时音视频通信能力，支持多人音视频通话和互动直播。
请注意，以上链接仅供参考，具体的产品选择应根据实际需求进行评估和决策。
相关·内容
我需要一些帮助。
假设我有一个指令：
import { Directive } from '@angular/core';
@Directive( {
selector: '[appMyDirective]'
} )
export class MyDirective {
constructor () {
}
seyHey () {
console.log( 'hey hey!' );
}
}
我有一个组件
import { Component, OnInit, ViewChild }
浏览 0提问于2017-07-11得票数 1
1回答
我有一个页面，我从url传递产品id。将从外部访问此url。
下面是我的路由定义。
const routes: Routes = [
{ path: 'product/:productId', component: ProductComponent }
]
在Product component中，我订阅了这个控制台路由。
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component
浏览 2提问于2018-01-29得票数 1
我有两个组件:组件A和组件B，其中Comp B名为"filter“是Comp A的子组件。
它们基于激活的路由，获取URL中的更改，并将调用发送到服务器并从中获取最新的"filterMap“。
Component_A.html
<section class="abc">
<filter [filterMap]=[filterMap]></filter>
<div *ngFor="let item of courses">
<!-- code -->
</div
浏览 0提问于2017-05-09得票数 0
1回答
我如何才能在数据服务中获得对localhost:4200/id的访问，才能在某些JSON链接中获得它？
我的意思是，当我在localhost:4200/001时，我想得到zzz.com/001/summary的JSON
尝试过这样做，但在控制台中，我得到了zzz.com/undefined/summary
const routes: Routes = [
{ path: ':id', component: AppComponent },
];
import { HttpClient } from '@angular/common/http';
import
浏览 3提问于2019-04-01得票数 0
我正在尝试从类似于"/categories/:cat1/:cat2/browse“的路由中获取参数。
将其加载到由路径加载的组件中似乎工作正常，但另一个已加载到应用程序中且未因路径更改而更改的组件
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params, RoutesRecognized } from '@angular/router';
@Component({
selector: 'app-breadcrumbs
浏览 14提问于2019-11-06得票数 0
回答已采纳
我有一个问题，从url获得一个param，同时在角中使用ActivatedRoute，因为我正在尝试下面的方法。
app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PartPriceComponent } from './part-price/part-price.component';
const routes: Routes = [
浏览 3提问于2020-08-12得票数 1
2回答
我对角真的很陌生(用了2年多的时间使用AngularJs)。我一直在观看pluralsight的视频，并设法建立了这样一条路线：
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { ResultsComponent } from './results.component';
import { ResultsSaveComponent } from './results-save.compone
浏览 4提问于2017-12-19得票数 0
回答已采纳
问题被更新为
我在网上寻找信息，但不幸的是，我没有找到任何信息。如果以参数的形式传输urlstring，有很多关于角如何从urlstring捕获值的信息，但我有另一种情况。
在成功地重新分配提交后，我的应用程序将url从后端发送到前端。这个url包含id和token，如下所示：
http://localhost:4200/activate?id=MzU&token=541-b257b0475444facd4e3f
我的问题是，如何在角7+中从url捕获id和token值？
Pls注意到，正如我所说的，这个url来自后端。在用户注册后，我的后端生成这个url并发送包含它的电子邮件。用户单
浏览 1提问于2019-02-20得票数 2
回答已采纳
我正在学习如何使用Angular 2，我目前正在使用路由。我尝试做的是使用子路由获取路由参数。
我目前正在开发一个可以显示用户详细信息的应用程序。url应该是这样的。
本地主机:4200/用户/id/详细信息
对于这个应用程序，我使用了嵌套在user文件夹中的UserComponent和DetailsComponent。我只希望能够更改url并在我的组件中获取url段。
我尝试获取url的方法是在DetailsComponent的构造函数中使用来自'@angular/router‘的ActivatedRoute，并将其分配给id属性，我使用字符串插值在模板中查看它。以下是Details
浏览 4提问于2017-02-25得票数 4
1回答
我是新来的角质2！
我想在点击标题后获取数据。我在路上经过身份证。我正在添加我的路由文件，我的组件文件和我的html文件。
**路线：**
const routes : Routes = [
{path: '' , redirectTo : '/blog' , pathMatch : 'full'},
{path: 'blog' , component: BlogsComponent},
{path: 'blog/:id', component: BlogDetailComponent},
{p
浏览 0提问于2017-04-03得票数 0
我有一个主要部件，里面有一个路由器插座。在加载到路由器出口中的组件中，我获取url参数，如下所示：
ngOnInit(): void {
// _route is injected ActivatedRoute
this._route.params.subscribe((params: Params) => {
if(params['url']){
this.testUrl = params['url'].replace(new RegExp('\%2[fF]', 'g')
浏览 8提问于2017-03-22得票数 38
回答已采纳
我想在特定的帖子(product.component)上点击，并在下一个url(details.component)上检索它的id。提前谢谢你！
product.component.html
<div class="card">
<h5>{{titre}}</h5>
<p class="card-text">{{description}}</p>
<p><a [routerLink]="['details',id]">Cl
浏览 0提问于2017-06-06得票数 0
路由操作不适用于组件和不同的参数。
我有一个获得不同参数的组件，如下所示。但是，当进入组件路由时，它只加载一次，并且.
这个.route.snshot.params‘’id‘没有更新。
路线
export const ROUTES: Routes = [
{path: '', component: AppComponent,
children: [
{ path: '', redirectTo: 'home', pathMatch: 'full'},
{ pa
浏览 4提问于2017-10-26得票数 0
回答已采纳
1回答
product.service.ts：
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from "rxjs/Observable";
import 'rxjs/add/operator/map'
@Injectable()
export class ProductService {
private apiUrl = "http://59
浏览 16提问于2017-08-29得票数 0
更新1
在我阅读了Alexanders的建议之后，我更新了代码并没有得到任何错误信息。但是Angular不再向服务器发出请求了，这让我很好奇。而且pageTitle也不更新。
appointmentDetail.component.html
{{appointmentDetail.time}}
appointmentDetail.component.ts
import { Component, OnInit, OnDestroy, Injectable } from '@angular/core';
import { ActivatedRoute, ParamMap } fro
浏览 0提问于2018-08-25得票数 0
回答已采纳
4回答
我对AngularJS相当陌生(使用2稳定)。我有一个现有的PHP/Codeigniter3应用程序，我的工作是制作一个SPA。我遇到了一个问题，我根本无法访问路由器参数来将它们添加到templateUrl中。
例如：
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
@Component({
selector: 'apps_container',
//
浏览 5提问于2016-09-30得票数 0
回答已采纳
3回答
我在我的Angular 7应用程序中包含了一个功能模块的路由。属于此功能的组件需要获取路由参数。我该怎么做呢？ 我尝试使用文档中显示的方法，如下面的代码所示。我已经评论了哪种方法有效，哪种方法不起作用。我想使用第二种方法，它不起作用，因为它将结果映射到我将在模板中使用的products$可观察对象。可能的问题是什么？ import { Component, OnInit } from "@angular/core";
import { ActivatedRoute, ParamMap } from "@angular/router";
import { Obs
浏览 26提问于2019-03-23得票数 0
回答已采纳
我想使用routerLink传递一个带有URL的值，并在另一个页面上读取该值。就像我有模块和子模块一样。在选择第一条记录时，该记录的id将传递给用户页面。在读取该Userid之后，我希望显示该用户和模块/子模块的详细信息。
那么我如何传递和获取值(对象)呢？
Userdetails组件类：
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'userde
浏览 2提问于2018-02-13得票数 0
在我的angular应用程序中，我正在尝试从AppComponent中的url获取参数。 但是当我使用ActivatedRoute来获取参数时，它会给出null。这是我的路由器配置。 {
path: '',
component: HomeComponent,
canActivate: [AuthGuard]
},
{
path: 'product/:product',
component: HomeComponent,
canActivate: [AuthGuard]
} 这就是我在AppComp
浏览 46提问于2019-04-12得票数 0
6回答
在@angular/router 3.0.0-rc.1的最新版本中，更改了从URL/路由获取参数的方式。
根据文档，您应该能够通过订阅params来获得params，但在我的例子中，它似乎不起作用。
我想要实现的是从子路由到我的父组件。
例如，假设这是我的路线：
const routes: Routes = [
{
path: 'parent',
component: ParentComponent,
pathMatch: 'prefix',
children: [
{
path: ':id
浏览 8提问于2016-08-15得票数 21
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
