Question

所以，我有一个聊天信使应用程序。我开始使用一个简单的数组或字符串来保存typescript chat.ts中的聊天消息。该组件的模板chat.html将消息显示为：

chat.html

<div class="chat-container">
        <div *ngFor="let item of items">
            <p>item</p>
        </div>
</div>

chat.ts

@IonicPage()
@Component({
  selector: 'page-chat',
  templateUrl: 'chat.html'
})
export class ChatPage {
    items:string[] = []

   send(msg:string){ this.items.push(msg);}

}

这可以正常工作。但是，items数组几乎限制在Chat组件中。我希望它可以从其他页面等访问。所以我决定将其移出它并创建一个专用类来保存它如下：的消息queue.ts

export class MessageQueue{
     static items: Message[] = [];

     constructor(){ }
}

我将chat.ts中的所有this.items替换为MessageQueue.items，这一切似乎都很好。但是，现在我被困了，因为我如何在chat.html中引用这个变量？

取代：

<div *ngFor="let item of items">

到

<div *ngFor="let item of MessageQueue.items">

不会工作

Answer 1

虽然在这种情况下使用服务是最好的做法，但是如果你想知道如何在角度模板中访问静态属性，它就像这样：

在您的.ts文件中：

public staticMessageQueue: typeof MessageQueue = MessageQueue;

然后在html模板中：

<div *ngFor="let item of staticMessageQueue.items">

离子2，角度2使用静态构件

1 个答案: