Angular 6 - 无法检索静态数据
[英] Angular 6 - Unable to retrieve static data
本文介绍了Angular 6 - 无法检索静态数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问题:在路由中定义的静态数据永远不会通过订阅 ActivatedRoute 上的数据对象来检索.其他一切似乎都正常，数据对象不为空，但我无法从中获取数据.当我尝试调试数据对象中的数据时，它输出未定义"，当我尝试将它绑定到 UI 时，没有任何显示，但是当我查看 Chrome 中的 ActivatedRoute 消息时，它有数据.经过多次尝试，我很确定我的语法应该基于许多示例工作，所以 Angular 6 中可能有什么变化，或者 Angular 有什么问题?
路线代码:
const appRoutes: Routes = [{路径:文章"，重定向到:/文章/合作伙伴"，路径匹配:完整"},{路径:文章"，孩子们: [{路径: "bawo",组件:BawoArticleComponent，数据:{标题:'BaWo'}},{路径:金手"，组件:GoldenHandsArticleComponent，数据:{标题:'黄金之手'}},{路径:投资者"，组件:InvestorsArticleComponent，数据:{标题:'投资者'}},{路径:合作伙伴"，组件:PartnersArticleComponent，数据:{标题:'合作伙伴'}}]},{小路: "**"，重定向到:/文章/合作伙伴"}];
检索组件代码(我已经评论了相关代码的位置):
导出类 ArticleSelectorComponent 实现 OnInit {箭头推子:字符串；不透明度:字符串；淡入淡出计时器:可观察的<数字>；构造函数(私有路由器:路由器，私有激活路由:ActivatedRoute){}ngOnInit() {this.router.events.subscribe((e: RouterEvent) => {this.fadeTimer = timer(0, 150);让订阅 = this.fadeTimer.subscribe(currentValue => {让 calc = currentValue &3;如果(计算 == 0){this.arrowFader = '>';this.opacity = '0.5';}否则如果(计算 == 1){this.arrowFader = '>>';this.opacity = '0.65';}别的 {this.arrowFader = '>>>';this.opacity = '0.8';}});this.fadeTimer.subscribe(currentValue => {如果(当前值 >= 14){订阅.取消订阅()；this.opacity = '1.0';}});});//这行不通！！！！this.activatedRoute.data.subscribe((data: Data) => {console.log(data['title']);});}//不相关，此代码在 html 按钮上使用参数运行navToArticle(num: number) {让 navStr = '';开关(数量){情况1: {navStr = '/文章/bawo';休息;}情况 2:{navStr = '/article/goldenhands';休息;}情况 3:{navStr = '/文章/合作伙伴';休息;}情况 4:{navStr = '/文章/投资者';休息;}}this.router.navigateByUrl(navStr);}}
AppComponent 的 HTML 代码(带有组件指令):
<div class="top"><div class="anim-in-left"><app-domains></app-domains>
<div class="anim-in-down top-title"><h1 class="top-title-text">{{ topTitle }}</h1>
<div class="anim-in-right"><app-presence></app-presence>
<div class="anim-in-up middle"><app-article-selector></app-article-selector>
解决方案
尝试下面的代码片段，因为如果您立即订阅 activateRoute 它只会订阅当前组件在路由器配置中注册的路由器数据更改，而我刚刚添加了 NavigationEnd过滤器，因此它不会被此要求不需要的所有其他事件触发.
<代码>...ngOnInit() {...this.title$ = this.router.events.pipe(filter((event) => event instanceof NavigationEnd),地图(_ => this.activatedRoute)，地图((路线)=> {而 (route.firstChild) {路线 = 路线.firstChild;}回程路线；}),mergeMap((route) => route.data),地图((数据)=> 数据.标题));this.title$.subscribe(title => console.log(title));...}...Problem: static data defined at route is never retrieved with subscription to data object at ActivatedRoute. Everything else seems to work fine, the data object is not null, but I can't get data from it. When I try to debug the data from the data object it outputs "undefined", when I try to bind it to UI nothing shows up, but when I look at ActivatedRoute messages in Chrome it has the data. After many tries I'm pretty sure my syntax should work based on many examples, so has something changed in Angular 6 perhaps, or something wrong with Angular?
Route code:
const appRoutes: Routes = [
{
path: "article",
redirectTo: "/article/partners",
pathMatch: "full"
},
{
path: "article",
children: [
{
path: "bawo",
component: BawoArticleComponent,
data: { title: 'BaWo' }
},
{
path: "goldenhands",
component: GoldenHandsArticleComponent,
data: { title: 'Golden Hands' }
},
{
path: "investors",
component: InvestorsArticleComponent,
data: { title: 'Investors' }
},
{
path: "partners",
component: PartnersArticleComponent,
data: { title: 'Partners' }
}
]
},
{
path: "**",
redirectTo: "/article/partners"
}
];
Retrieval component code (I've commented where the relevant code is):
export class ArticleSelectorComponent implements OnInit {
arrowFader: string;
opacity: string;
fadeTimer: Observable<number>;
constructor(private router: Router, private activatedRoute: ActivatedRoute) {}
ngOnInit() {
this.router.events.subscribe((e: RouterEvent) => {
this.fadeTimer = timer(0, 150);
let subscription = this.fadeTimer.subscribe(currentValue => {
let calc = currentValue & 3;
if (calc == 0) {
this.arrowFader = '>';
this.opacity = '0.5';
}
else if (calc == 1) {
this.arrowFader = '>>';
this.opacity = '0.65';
}
else {
this.arrowFader = '>>>';
this.opacity = '0.8';
}
});
this.fadeTimer.subscribe(currentValue => {
if(currentValue >= 14) {
subscription.unsubscribe();
this.opacity = '1.0';
}
});
});
// THIS DOESN'T WORK!!!!
this.activatedRoute.data.subscribe((data: Data) => {
console.log(data['title']);
});
}
// not relevant, this code is ran with parameter at html buttons
navToArticle(num: number) {
let navStr = '';
switch(num){
case 1: {
navStr = '/article/bawo';
break;
}
case 2: {
navStr = '/article/goldenhands';
break;
}
case 3: {
navStr = '/article/partners';
break;
}
case 4: {
navStr = '/article/investors';
break;
}
}
this.router.navigateByUrl(navStr);
}
}
HTML code for AppComponent (with component directives):
<div class="site">
<div class="top">
<div class="anim-in-left">
<app-domains></app-domains>
</div>
<div class="anim-in-down top-title">
<h1 class="top-title-text">{{ topTitle }}</h1>
</div>
<div class="anim-in-right">
<app-presence></app-presence>
</div>
</div>
<div class="anim-in-up middle">
<app-article-selector></app-article-selector>
</div>
</div>
解决方案
Try Below Snippet, Because if you subscribe to activatedRoute immediately it subscribes only to the router data changes where the current component is registered in router configuration and I just added NavigationEnd filter so it wont be triggered for all other events which is not needed for this requirement.
...
ngOnInit() {
...
this.title$ = this.router.events.pipe(
filter((event) => event instanceof NavigationEnd),
map(_ => this.activatedRoute),
map((route) => {
while (route.firstChild) {
route = route.firstChild;
}
return route;
}),
mergeMap((route) => route.data),
map((data) => data.title)
);
this.title$.subscribe(title => console.log(title));
...
}
...
这篇关于Angular 6 - 无法检索静态数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
