Question

我有一个构造函数，我从网址获取id。然后我在ngInit中有这个：

  ngOnInit() { 
this.as.getPostById(this.postId).subscribe(
  (post) => {
    this.thepost = post;
    console.log(this.thepost);
    this.meta['title'] = 'title of the post';
    this.meta['metaTitle'] = 'meta tag title';
    this.meta['metaDesc'] = 'dynamic description for post';
    this.meta['metaKeywords'] = 'dynamic,keywords,post';
    this.meta['ogTitle'] = 'post title';
    this.meta['ogDesc'] = 'dynamic description to share post';
    this.meta['ogImg'] = '/assets/images/postimage.jpg';
    this.meta['ogUrl'] = '/post/idpost';
  }
);
//console.log(this.thepost);
// this.meta['title'] = 'title of the post';
// this.meta['metaTitle'] = 'meta tag title';
// this.meta['metaDesc'] = 'dynamic description for post';
// this.meta['metaKeywords'] = 'dynamic,keywords,post';
// this.meta['ogTitle'] = 'post title';
// this.meta['ogDesc'] = 'dynamic description to share post';
// this.meta['ogImg'] = '/assets/images/postimage.jpg';
// this.meta['ogUrl'] = '/post/idpost';
}

如果我在订阅中设置了元对象，则它不起作用。但是meta标签之外确实会发生变化。 bizzare这是与this.thepost。我在订阅中设置它，我可以在模板中使用它，但是当我在订阅之外将其记录时，它是未定义的。

我在这里缺少什么？

让我添加我目前的整个代码：

import { Component, OnInit,OnDestroy,AfterViewInit,Renderer } from      '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs/RX';
import {AppService} from '../services/app.service';
import { MetaSetterService } from '../services/meta-setter.service';

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

  subscription: Subscription;
  postId:String;
  thepost;
  meta:Object = {};
  post;
  postTitle:String;

  constructor(
    private router: Router, 
    private activeR: ActivatedRoute,
    private as:AppService,
    private metaSetter:MetaSetterService,
    public renderer:Renderer
  ) {

    this.subscription = this.activeR.params.subscribe(
      (param:any) => {
        this.postId = param['id'];
      }
    )
   }

  ngOnInit() { 
     this.as.getPostById(this.postId).subscribe(
      (post) => {
        this.thepost = post;
        console.log(this.thepost);
        this.postTitle = post.title;
        this.meta['title'] = 'title of the post';
        this.meta['metaTitle'] = 'meta tag title';
         this.meta['metaDesc'] = 'dynamic description for post';
         this.meta['metaKeywords'] = 'dynamic,keywords,post';
        this.meta['ogTitle'] = 'post title';
        this.meta['ogDesc'] = 'dynamic description to share post';
        this.meta['ogImg'] = '/assets/images/postimage.jpg';
        this.meta['ogUrl'] = '/post/idpost';
      }
    );
    //console.log(this.thepost);
    // this.meta['title'] = 'title of the post';
    // this.meta['metaTitle'] = 'meta tag title';
    // this.meta['metaDesc'] = 'dynamic description for post';
    // this.meta['metaKeywords'] = 'dynamic,keywords,post';
    // this.meta['ogTitle'] = 'post title';
    // this.meta['ogDesc'] = 'dynamic description to share post';
    // this.meta['ogImg'] = '/assets/images/postimage.jpg';
    // this.meta['ogUrl'] = '/post/idpost';
  }



  ngOnDestroy(){
    this.subscription.unsubscribe();
  }

  ngAfterViewInit():void{
    this.metaSetter.setAll(this.renderer,this.meta);
  }


}

Answer 1

注释掉的代码在数据从as.getPostById().subscribe()调用到达之前执行。这是异步执行的本质。

您需要移动依赖于subscribe(...)回调内的响应移动的代码。

angular2无法在可观察订阅中设置对象

1 个答案: