更改特定页面上 ion-menu 的“max-edge-start”值答案

【问题标题】：Change "max-edge-start"-value for ion-menu on specific page更改特定页面上 ion-menu 的“max-edge-start”值
【发布时间】：2019-07-12 12:21:51
【问题描述】：

我想根据页面更改 ion-menu 的“max-edge-start”（又名“maxEdgeStart”）属性的值。我正在使用 sidemenu 模板并在 app.component.html 中编写菜单的所有代码。根据docs，默认设置为50px，但我想在特定页面上将其减小到0px，而不是在该页面中手动设置。

这是我尝试过的一些代码：

<ion-menu type="overlay" contentId="content" 
[maxEdgeStart]="{selectedUrl === '/myUrl'? '0': '50'}">

和：

<ion-menu type="overlay" contentId="content" 
max-edge-start="{{selectedUrl === '/myUrl'? '0': '50'}}">

我想让它类似于这个表达式：

<ion-menu <property>="{<if condition>? <then value>: <else value>}">

代码示例对应的错误：

Parser Error: Missing expected : at column 15 in 
[{selectedPath === '/myUrl'? '0': '50'}] in ng:///AppModule/AppComponent.html@2:49

和：

Can't bind to 'max-edge-start' since it isn't a known property of 'ion-menu'.
1. If 'ion-menu' is an Angular component and it has 'max-edge-start' input, then verify that it is part of this module.
2. If 'ion-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

【问题讨论】：

标签： html angular ionic4

【解决方案1】：

通过放置{ }，我认为它期待JSON，这就是为什么它在selectedPath（第15列）结束后说期待:。

您的[maxEdgeStart] 是正确的。

为了保持干净，您应该在代码中执行此操作，因此只需：

<ion-menu type="overlay" contentId="content" [maxEdgeStart]="getMaxEdgeStart()">

然后在该页面的 ts 代码文件中将你的函数放入：

getMatchEdgeStart():number {
    return this.selectedUrl === '/myUrl' ? 0: 50;
}

如果这不起作用，那么很可能与您的 selectedUrl 值有关，因为我不知道您是从哪里获得的。

【讨论】：