Question

以下是离子页面的内容：

    <ion-content padding class = ""view-content">
    <form>
        [form content here...]
    </form>
    </ion-content>

我的css文件：

.view-content {
    background: url("background.jpg");

但它无效，我收到以下错误：

Unhandled Promise rejection: Template parse errors:
'ion-view' is not a known element:
1. If 'ion-view' is an Angular component, then verify that it is part of this module.
2. If 'ion-view' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
[ERROR ->]<ion-view view-title="My Page">
<ion-content>
 Hello!
")

可以告诉我在这里做错了什么或如何解决这个问题。我是离子框架的新手，对Web开发来说是新手。

Answer 1

ion-view是离子版本1中的有效组件，在版本2中不可用。

要设置图像背景，您可以设置css类并设置“背景”属性

<ion-content class="view-class">
 Hello!
</ion-content>

在相应的scss中

.view-class {
   background: url("path_to_image")
}

编辑： sample plunker

Answer 2

我不太了解离子，但似乎错误在模块中

<ion-view view-title="My Page">
    <ion-content>
      Hello!
    </ion-content>
  </ion-view>

根据错误，如果您使用的是ion-view或应用中的任何组件，则必须在主模块中添加该组件。

就像在angular2中一样，我们在app.module.ts文件中做了同样的事情，我们告诉角度我们将在app的负载上加载哪些组件。

像这样

@NgModule({
  declarations: [
    here component list, directives and pipes
  ],
  imports: [
    ion-view, etc.....
  ],
  providers: [CanActivateViaAuthGuard, GlobalService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 3

离子视图不是它所说的元素。去掉和结束

Answer 4

从它的外观来看，我认为您创建的页面或组件位于一个单独的模块中。请将IonicModule导入添加到该模块，并在app模块中导入该模块。

import { NgModule } from "@angular/core";
import { ItemsComponent } from "./items/items";
import { ItemComponent } from "./item/item";
import { IonicModule } from "ionic-angular";

@NgModule({
  declarations: [ItemsComponent, ItemComponent],
  imports: [IonicModule],
  exports: [ItemsComponent, ItemComponent]
})
export class ComponentsModule {}

离子视图不是已知元素

4 个答案: