Question

我有一个Ionic 3应用程序，在我的登录页面中，我想使用particles.js lib（https://www.npmjs.com/package/angular-particle）。

如果我在app.module.ts上导入它，它可以正常工作，但是它会为我的所有应用程序加载吗？

我想在我的登录页面上使用它。当页面不同时，不应加载particles.js。

我已经尝试在我的login.ts上导入它但是它不起作用。我也尝试将它导入login.module.ts，但结果相同

login.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
    selector: 'page-login',
    templateUrl: 'login.html',
})
export class LoginPage 
{
    myStyle: Object = {};
    myParams: Object = {};
    width: number = 100;
    height: number = 100;

    constructor(public navCtrl: NavController, public navParams: NavParams) 
    {
    }

    ionViewDidLoad() 
    {
        this.myStyle = {
            'position': 'fixed',
            'width': '100%',
            'height': '100%',
            'z-index': -1,
            'top': 0,
            'left': 0,
            'right': 0,
            'bottom': 0,
        };

        this.myParams = {
                particles: {
                    number: {
                        value: 200,
                    },
                    color: {
                        value: '#242A31'
                    },
                    shape: {
                        type: 'triangle',
                    },
            }
        };
    }
}

login.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LoginPage } from './login';
import { ParticlesModule } from 'angular-particle';

@NgModule({
    declarations: [
        LoginPage,
    ],
    imports: [
        IonicPageModule.forChild(LoginPage),
        ParticlesModule
    ]
})
export class LoginPageModule {}

的login.html

<ion-header>
    <ion-navbar>
        <ion-title>Elly</ion-title>
    </ion-navbar>
</ion-header>

<ion-content id="page-content" padding>
    <particles [params]="myParams" [style]="myStyle" [width]="width" [height]="height"></particles>

    <!-- <ion-card>
        meu card
    </ion-card> -->
</ion-content>

错误

Template parse errors:
Can't bind to 'params' since it isn't a known property of 'particles'. ("

&lt;ion-content id="page-content" padding&gt;
    &lt;particles [ERROR -&gt;][params]="myParams" [style]="myStyle" [width]="width" [height]="height"&gt;&lt;/particles&gt;

    &lt;!-- &lt;ion-c"): ng:///AppModule/LoginPage.html@7:15
Can't bind to 'width' since it isn't a known property of 'particles'. ("

&lt;ion-content id="page-content" padding&gt;
    &lt;particles [params]="myParams" [style]="myStyle" [ERROR -&gt;][width]="width" [height]="height"&gt;&lt;/particles&gt;

    &lt;!-- &lt;ion-card&gt;
"): ng:///AppModule/LoginPage.html@7:53
Can't bind to 'height' since it isn't a known property of 'particles'. ("ent id="page-content" padding&gt;
    &lt;particles [params]="myParams" [style]="myStyle" [width]="width" [ERROR -&gt;][height]="height"&gt;&lt;/particles&gt;

    &lt;!-- &lt;ion-card&gt;
"): ng:///AppModule/LoginPage.html@7:69
'particles' is not a known element:
1. If 'particles' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

&lt;ion-content id="page-content" padding&gt;
    [ERROR -&gt;]&lt;particles [params]="myParams" [style]="myStyle" [width]="width" [height]="height"&gt;&lt;/particles&gt;

    "): ng:///AppModule/LoginPage.html@7:4

有人可以帮助我吗？

Ionic 3仅在一个页面中使用第三方库

0 个答案: