我的侧边菜单使用 Angular 覆盖了 Ionic4 下主页的 html 内容
My side menu overrides my home page's html content under Ionic4 using Angular
我使用 Ionic4/Angular,我刚刚使用以下教程创建了一个项目:https://www.youtube.com/watch?v=5OgqjVbsNuE
我没有触及路由等任何东西...
这是我的 app.component.html :
<ion-app>
<ion-split-pane>
<ion-menu type = "overlay">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-menu-toggle auto-hide="false" *ngFor="let p of appMenu">
<ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
<ion-label>{{p.title}}</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
</ion-split-pane>
</ion-app>
生成以下结果:
Menu displayed & fully working, home page not showing
当我将代码更改为此(出于测试目的)时:
<ion-router-outlet main></ion-router-outlet>
</ion-split-pane>
<ion-router-outlet></ion-router-outlet>
home page & menu icon finally displayed but no menu showing
如果我从该代码中删除(再次出于测试目的,我知道这是错误的) <ion-router-outlet main></ion-router-outlet>
:
<ion-app>
<ion-split-pane>
<ion-menu type = "overlay">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-menu-toggle auto-hide="false" *ngFor="let p of appMenu">
<ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
<ion-label>{{p.title}}</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
</ion-split-pane>
<ion-router-outlet></ion-router-outlet>
</ion-app>
生成以下结果:
home page only
我想要的是图 1 和图 2:显示菜单和带图标的主页。
我该怎么做?
一切似乎都在这段代码中,但我是 Ionic4/Angular.
的初学者
我认为这不是必需的,但这是我主页的 html 代码:
<ion-header>
<ion-toolbar>
<ion-buttons slot = "start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>Ionic Blank</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
The world is your oyster.
<p>If you get lost, the <a target = "_blank" rel = "noopener" href = "https://ionicframework.com/docs">docs</a> will be your guide.</p>
</ion-content>
app.component.ts :
import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss']
})
export class AppComponent {
public appMenu = [
{title : 'Accueil', url: '/home', icon: 'home'},
{title : 'Profile', url: '/profil', icon: 'person'},
{title : 'Lire', url: '/read', icon: 'search'},
{title : 'Publier', url: '/publish', icon: 'create'},
{title : 'Ma bibliothèque', url: '/mylibrary', icon: 'book'},
{title : 'Mes oeuvres', url: '/myworks', icon: 'book'},
{title : 'Mon abonnement', url: '/mysubscriptions', icon: 'cash'}
];
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar
) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
}
您的实施不正确。考虑以下摘自 Ionic Split Pane Docuementation
<ion-split-pane contentId="main">
<!-- the side menu -->
<ion-menu contentId="main">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
</ion-menu>
<!-- the main content -->
<ion-router-outlet id="main"></ion-router-outlet>
请注意,您缺少 ion-split-pane 中的 contentId,如上所示。然后相关...您还缺少 ion-router-outlet 的 id。第三,你还应该将contentId添加到ion-menu中,如上所示。
我使用 Ionic4/Angular,我刚刚使用以下教程创建了一个项目:https://www.youtube.com/watch?v=5OgqjVbsNuE 我没有触及路由等任何东西...
这是我的 app.component.html :
<ion-app>
<ion-split-pane>
<ion-menu type = "overlay">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-menu-toggle auto-hide="false" *ngFor="let p of appMenu">
<ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
<ion-label>{{p.title}}</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
</ion-split-pane>
</ion-app>
生成以下结果:
Menu displayed & fully working, home page not showing
当我将代码更改为此(出于测试目的)时:
<ion-router-outlet main></ion-router-outlet>
</ion-split-pane>
<ion-router-outlet></ion-router-outlet>
home page & menu icon finally displayed but no menu showing
如果我从该代码中删除(再次出于测试目的,我知道这是错误的) <ion-router-outlet main></ion-router-outlet>
:
<ion-app>
<ion-split-pane>
<ion-menu type = "overlay">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-menu-toggle auto-hide="false" *ngFor="let p of appMenu">
<ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
<ion-label>{{p.title}}</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
</ion-split-pane>
<ion-router-outlet></ion-router-outlet>
</ion-app>
生成以下结果: home page only
我想要的是图 1 和图 2:显示菜单和带图标的主页。
我该怎么做? 一切似乎都在这段代码中,但我是 Ionic4/Angular.
的初学者我认为这不是必需的,但这是我主页的 html 代码:
<ion-header>
<ion-toolbar>
<ion-buttons slot = "start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>Ionic Blank</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
The world is your oyster.
<p>If you get lost, the <a target = "_blank" rel = "noopener" href = "https://ionicframework.com/docs">docs</a> will be your guide.</p>
</ion-content>
app.component.ts :
import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss']
})
export class AppComponent {
public appMenu = [
{title : 'Accueil', url: '/home', icon: 'home'},
{title : 'Profile', url: '/profil', icon: 'person'},
{title : 'Lire', url: '/read', icon: 'search'},
{title : 'Publier', url: '/publish', icon: 'create'},
{title : 'Ma bibliothèque', url: '/mylibrary', icon: 'book'},
{title : 'Mes oeuvres', url: '/myworks', icon: 'book'},
{title : 'Mon abonnement', url: '/mysubscriptions', icon: 'cash'}
];
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar
) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
}
您的实施不正确。考虑以下摘自 Ionic Split Pane Docuementation
<ion-split-pane contentId="main">
<!-- the side menu -->
<ion-menu contentId="main">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
</ion-menu>
<!-- the main content -->
<ion-router-outlet id="main"></ion-router-outlet>
请注意,您缺少 ion-split-pane 中的 contentId,如上所示。然后相关...您还缺少 ion-router-outlet 的 id。第三,你还应该将contentId添加到ion-menu中,如上所示。