更改特定页面上离子菜单的 "max-edge-start"-值

Question

我想根据页面更改离子菜单的 "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.

Answer 1

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

你的 [maxEdgeStart] 是正确的。

为了保持干净，您应该在代码中这样做，所以只需：

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

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

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

如果这不起作用，则可能与您的 selectedUrl 值有关，因为我不知道您是从哪里提取的。

更改特定页面上离子菜单的 "max-edge-start"-值

Change "max-edge-start"-value for ion-menu on specific page

html

angular

ionic4