问题是关于Angular Material的导航栏吗？

huangapple
go评论101阅读模式
英文:

Probleme with angular material NavBar?

问题

这是 Header 组件的代码，其中我定义了一个菜单项数组 menuItems，其中包含标签和图标名称，这些内容将显示在导航栏中。然后在 HTML 中，我使用 Angular Material 来循环遍历列表以显示所有标签和图标。但如何添加 onclick("logout()") 或 href: 'some route' 呢？我已经在 menuItems 表中添加了 href 属性，但在 HTML 中我无法使用 {{item.href}} 调用它，它只显示文本而不执行动作。

以下是相关代码片段：

  1. {
  2.   label: 'log out',
  3.   icon: 'logout',
  4.   href: 'click(logout())',
  5.   showOnMobile: false,
  6.   showOnTablet: false,
  7.   showOnDesktop: false
  8. },
  1. <button
  2.   mat-button
  3.   *ngFor="let item of menuItems"
  4.   [fxShow]="item.showOnDesktop"
  5.   [fxShow.xs]="item.showOnMobile"
  6.   [fxShow.sm]="item.showOnTablet"
  7. >
  8.   <mat-icon class="mr">{{item.icon}}</mat-icon>
  9.   {{item.label}}
  10. </button>

请注意，您在 href 属性中似乎有一个不正确的值 'click(logout())'。如果您希望在点击时执行 logout() 函数，可以考虑修改代码如下：

  1. {
  2.   label: 'log out',
  3.   icon: 'logout',
  4.   clickAction: 'logout',
  5.   showOnMobile: false,
  6.   showOnTablet: false,
  7.   showOnDesktop: false
  8. },
  1. <button
  2.   mat-button
  3.   *ngFor="let item of menuItems"
  4.   [fxShow]="item.showOnDesktop"
  5.   [fxShow.xs]="item.showOnMobile"
  6.   [fxShow.sm]="item.showOnTablet"
  7.   (click)="item.clickAction === 'logout' ? logout() : navigateTo(item.clickAction)"
  8. >
  9.   <mat-icon class="mr">{{item.icon}}</mat-icon>
  10.   {{item.label}}
  11. </button>

然后，您可以在 logout() 函数中执行注销操作，并根据 clickAction 的值执行其他导航操作。请确保定义 navigateTo() 函数来处理其他导航行为。

英文:

I have defined an array in which I have the list of label and icon names that will appear in the nav bar and Then in the html I have used Angular material to loop over the list to display all labels and icons. but how can I add the onclick("logout()") or the href:'some route'? the code is bellow , I have added href property to menuItems table but I can call it in the html even with {{item.href}} only display the text not doing the action.

  1. This is Header Component:///////
  3. export class HeaderComponent implements OnInit{
  5.   constructor(private userService: UserService) {
  6.   }
  7.   isLoggedIn: boolean = false;
  8.   menuItems: MenuItem[] = [
  10.     {
  11.       label: &#39;Offers&#39;,
  12.       icon: &#39;notes&#39;,
  13.       href:&#39;&#39;,
  14.       showOnMobile: false,
  15.       showOnTablet: true,
  16.       showOnDesktop: true
  17.     }
  18.     ,
  19.     {
  20.       label: &#39;Bookmark&#39;,
  21.       icon: &#39;bookmark&#39;,
  22.       href:&#39;&#39;,
  23.       showOnMobile: false,
  24.       showOnTablet: true,
  25.       showOnDesktop: true
  26.     },
  27.     {
  28.       label: &#39;Application&#39;,
  29.       icon: &#39;video_stable&#39;,
  30.       href:&#39;&#39;,
  31.       showOnMobile: false,
  32.       showOnTablet: false,
  33.       showOnDesktop: true
  34.     },
  35.     {
  36.       label: &#39;Claim&#39;,
  37.       icon: &#39;send&#39;,
  38.       href:&#39;&#39;,
  39.       showOnMobile: false,
  40.       showOnTablet: false,
  41.       showOnDesktop: true
  42.     },
  43.     {
  44.       label: &#39;Forum&#39;,
  45.       icon: &#39;forum&#39;,
  46.       href:&#39;&#39;,
  47.       showOnMobile: true,
  48.       showOnTablet: true,
  49.       showOnDesktop: true
  50.     },
  51.     {
  52.       label: &#39;log out&#39;,
  53.       icon: &#39;logout&#39;,
  54.       href:&#39;click(logout()&#39;,
  55.       showOnMobile: false,
  56.       showOnTablet: false,
  57.       showOnDesktop: false
  58.     },
  59.     {
  60.       label: &#39;Profile&#39;,
  61.       icon: &#39;profile&#39;,
  62.       href:&#39;&#39;,
  63.       showOnMobile: false,
  64.       showOnTablet: false,
  65.       showOnDesktop: false
  66.     },
  70.   ];
  73.   ngOnInit(): void {
  74.   }
  76.   logout(){
  77.     this.userService.signout()
  78.   }
  83. //this is the html :::::
  85. &lt;mat-toolbar fxLayout=&quot;row&quot; color=&quot;primary&quot;&gt;
  86.   &lt;span fxFlex&gt;&lt;mat-icon&gt;home&lt;/mat-icon&gt; Esprit Mobility &lt;/span&gt;
  88.   &lt;button
  89.     mat-button
  90.     *ngFor=&quot;let item of menuItems&quot;
  91.     [fxShow]=&quot;item.showOnDesktop&quot;
  92.     [fxShow.xs]=&quot;item.showOnMobile&quot;
  93.     [fxShow.sm]=&quot;item.showOnTablet&quot;
  94.   &gt;
  95.     &lt;mat-icon class=&quot;mr&quot;&gt;{{item.icon}}&lt;/mat-icon&gt;
  96.     {{item.label}}
  97.   &lt;/button&gt;
  98.   &lt;ng-container&gt;
  99.     &lt;button mat-icon-button [matMenuTriggerFor]=&quot;dropMenu&quot;&gt;
  100.       &lt;mat-icon&gt;more_vert&lt;/mat-icon&gt;
  101.     &lt;/button&gt;
  102.     &lt;mat-menu #dropMenu=&quot;matMenu&quot;&gt;
  103.       &lt;ng-container *ngFor=&quot;let item of menuItems&quot;&gt;
  104.         &lt;div
  105.           [fxShow]=&quot;!item.showOnDesktop&quot;
  106.           [fxShow.sm]=&quot;!item.showOnTablet&quot;
  107.           [fxShow.xs]=&quot;!item.showOnMobile&quot;
  108.         &gt;
  109.           &lt;button mat-menu-item  &gt;
  110.             &lt;mat-icon class=&quot;mr&quot;&gt;{{item.icon}}&lt;/mat-icon&gt;
  111.             {{item.label}}
  112.           &lt;/button&gt;
  113.           &lt;mat-divider&gt;&lt;/mat-divider&gt;
  114.         &lt;/div&gt;
  115.       &lt;/ng-container&gt;
  116.     &lt;/mat-menu&gt;
  117.   &lt;/ng-container&gt;
  118. &lt;/mat-toolbar&gt;

问题是关于Angular Material的导航栏吗？

Thanks in advance for any help 问题是关于Angular Material的导航栏吗？

  1.                                              .

答案1

得分: 1

从视图的角度来看，我会调整按钮。应该指示它触发(click)方法。if语句确保href不能为null/undefined。

  1. <button mat-menu-item (click)="item.href ? item.href() : ''">
  2.     <mat-icon class="mr">{{item.icon}}</mat-icon>
  3.     {{item.label}}
  4. </button>

从组件的角度来看，这是注销对象的外观：

  1. {
  2.   label: '退出',
  3.   icon: '退出',
  4.   href: this.logout,
  5.   showOnMobile: false,
  6.   showOnTablet: false,
  7.   showOnDesktop: false,
  8. }

看一下href的值 - 它不包含()，因为它会立即调用一个函数。

英文:

From the view perspective, I would adjust the button. It should be instructed to trigger a (click) method. The if statement ensures that the href cannot be null / undefined.

  1. &lt;button mat-menu-item (click)=&quot;item.href ? item.href(): &#39;&#39;&quot;&gt;
  2.             &lt;mat-icon class=&quot;mr&quot;&gt;{{item.icon}}&lt;/mat-icon&gt;
  3.             {{item.label}}
  4.           &lt;/button&gt;

From the component perspective, here is how the logout object looks:

  1. {
  2.   label: &#39;log out&#39;,
  3.   icon: &#39;logout&#39;,
  4.   href: this.logout,
  5.   showOnMobile: false,
  6.   showOnTablet: false,
  7.   showOnDesktop: false,
  8. },

Take a look at href value - it does not contain (), since it would immediately invoke a function

huangapple
  • 本文由 发表于 2023年7月20日 15:29:08
  • 转载请务必保留本文链接：https://go.coder-hub.com/76727590.html
  • angular
  • angular-directive
  • angular-material
  • angular-ui-router
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定