首页 > 解决方案 > Nativescript Angular 6 - 将带有字符串的图标添加到操作栏标题中

问题描述

将 Angular 6 与 Nativescript 一起使用。对于我的一个页面,我希望 Actionbar 标题是一个下拉菜单 - 所以我想显示带有向下图标的文本。 在此处输入图像描述

这是我目前所拥有的,但我似乎无法弄清楚如何在操作栏标题中添加除文本之外的任何内容:```

<ActionBar [title]="user.userName" class="profile-head">
  <ActionItem
    ios.position="left"
    android.position="left">
        <Label
            class="fal"
            text="&#xf234;"></Label>
    </ActionItem>
  <ActionItem
    ios.position="right"
    android.position="right">
        <Label
            class="fas"
            text="&#xf013;">
        </Label>
    </ActionItem>
</ActionBar>

```

标签: angulartypescriptandroid-actionbarnativescript

解决方案


使用自定义 TitleView

例子

<ActionBar title="test">
  <StackLayout orientation="horizontal"
    ios:horizontalAlignment="center"
    android:horizontalAlignment="left">
    <Label text="YourTest"  class="action-label"></Label>
    <Image src="res://Your_Image" class="action-image"></Image>
  </StackLayout>
</ActionBar>

推荐阅读