Question

我正在开发一个应用程序，它将像一个带有主页的ppt演示文稿，然后是幻灯片（延迟加载），每张幻灯片都有一个导航栏：prev，home和next btn。所以我想：如果导航对所有幻灯片都很常见，为什么不将它作为一个单独的组件，navCtrl和nextSLide将像@Input()一样传输，{{1} } - 将是goHome，并且将直接在html中返回seRoot() - navCtrl.pop()。我将在下面发布代码：

slide1.ts

navPop

slide1.htm

@IonicPage()
@Component({
  selector: 'page-slide1',
  templateUrl: 'slide1.html',
})
export class Slide1Page {
  link:string = "Slide2Page"
}

nav.ts

<ion-content padding>
  <app-nav [toSlide]="link"></app-nav>
</ion-content>

nav.html

@IonicPage()
@Component({
  selector: 'app-nav',
  templateUrl: 'nav.html'
})
export class NavComponent {
  @Input() toSlide;
  constructor(public navCtrl: NavController) {}
}

nav.module.ts 我已成功<button class="nav_left" navPop></button> <button class="to_home" (click)="goHome()"></button> <button class="nav_right" [navPush]="toSlide"></button>

IonicPagemodule

当我从homePage导航到slide1Page时，我得到一个很长的错误（这里有一大块）：

未捕获（承诺）：错误：模板解析错误：无法绑定到＆＃39; toSlide＆＃39;因为它不是app-nav＆＃39;的已知属性。 1.如果＆＃39; app-nav＆＃39;是一个Angular组件，它具有“滑动”功能。输入，然后验证它是否是该模块的一部分。 2.如果＆＃39; app-nav＆＃39;是一个Web组件，然后添加＆＃39; CUSTOM_ELEMENTS_SCHEMA＆＃39;到了＆＃39; @ NgModule.schemas＆＃39;该组件可以禁止此消息。

我想知道我的方法是好还是可行，因为我不想花时间做任何事情。谢谢！

Answer 1

好的，所以有错误是因为我没有在slide1.module.ts

中包含

import { NavComponent } from './../../components/nav/nav';
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { Slide1Page } from './slide1';

@NgModule({
  declarations: [
    Slide1Page,
    NavComponent
  ],
  imports: [
    IonicPageModule.forChild(Slide1Page),
  ],
  exports: [
    Slide1Page,
    NavComponent
  ]
})
export class Slide1PageModule {}

 const s =  service.fakedata.map(f=>{
          f.results = f.results.map(r=>{
            return r.filter(m=> m.rId !== id)
          })
        })

仍然 - 这是一个好方法吗？

Ionic3延迟加载页面

1 个答案: