使用 AngularFire 和 Angular2 动态加载页面

Question

我正在学习 Angular2 并将应用程序转换为 Angular2。现在我正在尝试创建从 Firebase 加载内容的动态页面。但是我卡住了。如果我理解正确的话，我需要在构造函数中加载 AngularFire，在 ngOnInit() 中加载路由参数。由于先调用了构造函数，所以无法使用路由Param来调用AngularFire。

现在这是我的代码：

export class StaticContentComponent {
    pagename;
    isHome;

    ngOnInit(): void {
        this.route.params.forEach((params: Params) => {
            this.pagename = params['pageName'];
            this.isHome = (this.pagename == 'home');
        });
    }

    pagecontent: FirebaseObjectObservable<any[]>;
    constructor(af: AngularFire, private route: ActivatedRoute) {
        this.pagecontent = af.database.object('/pages/content/' +  this.pagename);
    }
}

我尝试切换它们，使用其他初始化，但是日志中出现大红线错误。

另外，我应该只使用 AngularFire 的服务吗？我不确定，AngularFire 示例没有使用它们。

谢谢。

Answer 1

您可以简单地嵌套调用。

constructor(private af: AngularFire, private route: ActivatedRoute) { }

ngOnInit(): void {
    this.route.params.forEach((params: Params) => {
        this.pagename = params['pageName'];
        this.isHome = (this.pagename == 'home');

        this.pagecontent = af.database.object('/pages/content/' +  this.pagename);
    });
}

这会执行以下操作：

subscribe 到路由参数
解决后，从 Firebase 检索对象

编辑：

关于你的第二个问题，AngularFire 本身已经是一个服务，所以如果 AF 的功能对你来说足够了，你不必将它包装在另一个服务中。

例如，我喜欢将 AF 包装在另一个服务中并添加控制台调试消息。

使用 AngularFire 和 Angular2 动态加载页面

Dynamic load page with AngularFire and Angular2

firebase

angularfire

firebase-realtime-database

angular