Question

我尝试使用代码

传递page_number

ionViewDidLoad() {
    this.page_number = this.navParams.get('page_number'); //in lesson-content.ts
}

为：

<question page_number="page_number"></question>  // in lesson-content.html

但控制台的结果返回 undefined 。

console.log('in_component:'+this.page_number); // From question.ts component

当我运行没有<question></question>组件的代码时，结果很好。只有当我将数据传递给

这样的组件时才会出现问题

<question page_number="page_number"></question>

我需要做些什么来解决这些问题？我尝试在问题组件上使用ngOnInit()，但仍然没有得到解决方案。有人有想法吗？

信息页：

课-content.html：

<ion-content padding>
    <question page_number="page_number"></question>
</ion-content>

<ion-footer>
    <ion-toolbar>
        <ion-buttons start>
            <button ion-button clear icon-only>
                <ion-icon name="tag"></ion-icon>
            </button>
        </ion-buttons>
        <ion-buttons end>
            <button (click)="continueLesson(page_number)" ion-button class="btn-continue">
                Continue
            </button>
        </ion-buttons>
    </ion-toolbar>
</ion-footer>

lesson.ts：

import {Component} from '@angular/core';
import {IonicPage, NavController, NavParams} from 'ionic-angular';
import {LessonProvider} from "../../../providers/lesson/lesson";

@IonicPage()
@Component({
    selector: 'page-lesson-content',
    templateUrl: 'lesson-content.html',
})

export class LessonContentPage {
    public page_number:number;
    constructor(public navCtrl: NavController, public navParams: NavParams, private dataLesson: LessonProvider) {

    }

    ionViewDidLoad() {
        this.page_number = this.navParams.get('page_number');
    }

    gotoSummary()
    {
        this.navCtrl.push('SummaryPage');
    }

    continueLesson(page)
    {
        page = parseInt(page) + 1;
        console.log('page_'+page);
        if(page > this.dataLesson.getTotalLesson() - 1)
        {
            this.gotoSummary();
        }else
        {
            this.navCtrl.push('LessonContentPage',{page_number:page});
        }
    }

}

组件：

question.ts：

import {Component, Input} from '@angular/core';
import {LessonProvider} from "../../providers/lesson/lesson";

@Component({
    selector: 'question',
    templateUrl: 'question.html',
    inputs: ['page_number']
})
export class QuestionComponent {

    public dataDisplay:any = [];

    @Input()
    page_number:any;

    constructor(public dataQuestion:LessonProvider) {
        console.log('in_component_construct:'+this.page_number);
    }

    ngOnInit()
    {
        console.log('in_component:'+this.page_number);
        this.dataDisplay = this.dataQuestion.getLessonData(this.page_number)
    }

}

question.html：

<div [innerHTML] = "dataDisplay.content"></div>

Answer 1

存在语法错误。做这些改变并尝试。

课-content.html：

<question [page_number]="page_number"></question>

question.ts：

@Input('page_number')
page_number:any;

questionClick(){
  console.log(this.page_number);
}

question.html：

<div (click)="questionClick()">{{page_number}}</div>

Answer 2

尝试传递密钥作为字符串可能适用于例如： -

let data = {"page_number": page}

使用参数传递数据时，自定义组件输入未获得正确的值

2 个答案: