Angular 5 ParamMap не работает на app.component.ts
Я хочу получить идентификатор из параметров маршрута, но он возвращает значение null.
app.component.ts:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
constructor(private route: ActivatedRoute) { }
ngOnInit(){
const id = this.route.snapshot.paramMap.get('idC');
console.info(id);
}
routing.ts:
{ path: 'profile/:idC', component: AccountComponent }
Цель кода в app.component заключается в том, что я использую панель навигации в приложении, поэтому, когда пользователь подключен, ожидаемым результатом будет получение идентификатора из маршрута, чтобы панель навигации отображала «Добро пожаловать, пользователь1». Любое решение?
Не могли бы вы привести пример подписки?
@KrishnaRathore уже сделал это в своем ответе ниже
Ответы 2
Вы можете выбрать idC из своего AccountComponent и присвоить значение свойству внутри службы.
account.component.ts
constructor(private route: ActivatedRoute, myService: MyService) { }
ngOnInit(){
const id = this.route.snapshot.paramMap.get('idC');
this.myService.id = id;
console.info(id);
}
Получите доступ к той же службе с вашего AppComponent и используйте эту переменную в своем HTML.
Например, внутри вашего app.component.ts
constructor(private route: ActivatedRoute, myService: MyService) { }
и ваш app.component.html
<p>ID: {{myService.id}}</p>
Что поставить на мой сервис?
@Atom - это сервис, который вы можете использовать для связи между компонентами. Это может быть пустой сервис, может быть, с названием shared-data.service.ts. Внедрите один и тот же сервис в оба компонента и используйте его так, как он используется в приведенном выше HTML.
Да, я знаю, но как присвоить сервису значение id из AccountComponent? Не могли бы вы дать мне образец моей услуги. Спасибо
@Atom -Создайте сервис, возможно, пустой, используя команду ng g service my-service. Затем напишите код, упомянутый для account.component.ts выше, в ответе внутри вашего account.component.ts. Затем вставьте ту же службу в ваш app.component.ts и получите доступ к ней в HTML, как указано выше.
Я сделал именно то, что вы сказали. Спасибо, сработало!
Только один вопрос: что, если я хочу назначить myservice.id переменной в app.component, я попробовал, и она вернет undefined!
@Atom - назначьте myService какому-либо объекту в вашем компоненте и используйте этот объект, чтобы указать на идентификатор. У этого есть причина. На объекты ссылаются по адресу. Следовательно, любые изменения внутри самого объекта будут отражаться в каждом месте, где на него ссылаются. Однако попытка получить доступ к id напрямую не отразит изменения, потому что он становится примитивным типом.
Не очень много получил от комментария, вы говорите, что я должен установить переменную как объект в myService и назначить ее из компонента? Возможно, вам поможет образец кода.
@Atom Проверить передачу по значению и передачу по ссылке. Может, эта статья поможет - hackernoon.com/…
Вы также можете получить значение параметры без служба
constructor(private router: Router, private route: ActivatedRoute) {}
ngOnInit() {
this.router.events.subscribe((event: any) => {
let r = this.route;
while (r.firstChild) {
r = r.firstChild
}
r.params.subscribe(params => {
console.info(params.idC);
});
});
}
Вы пробовали подписаться на наблюдаемый
route.paramMap, чтобы следить за изменениями?