Question

伙计们我一直在寻找答案，将这个布局包装在tabview中，但似乎没有任何东西，所以我在这里问，希望有人可以发光。

我遇到的问题：我想在NS小吃[http://www.nativescriptsnacks.com/snippets/2016/08/30/AOSP-messaging-layout.html]上建议使用伪造的会话数据，使用假库作为依赖关系，在默认的tabview中为Android应用程序传递服务的AOSP消息布局但运行时视图中没有显示任何内容。

以下是文件，首先是 conversation.ts ，其中包含可维护性类：

export class User {
  name: string;
  pictureUrl: string;
}

export class Conversation {
  sender: User;
  content: string;
  date: Date;
}

export class Participants {
  me: User;
  other: User;
}

export class Convo {
  participants: Participants;
  conversations: Array<Conversation>;
}

使用faker库和内容配置

conversation.service.ts ：

import { Injectable } from "@angular/core";

import { User, Conversation, Participants, Convo } from "./conversation";
const faker = require("faker");

@Injectable()
export class ConversationService {

  getConvo(): Convo {
    const me = {
      name: "Me",
      pictureUrl: "https://unsplash.it/100/100?image=790"
    };
    const other = {
      name: faker.name.findName(),
      pictureUrl: "https://unsplash.it/100/100?image=823"
    };

    const conversations = [];
    for (let i = 0; i < 5; i++) {
      const sender = faker.random.boolean() ? me : other;
      const content = faker.lorem.sentence();
      const date = faker.date.recent();

      conversations.push({
        sender: sender,
        content: content,
        date: date
      });
    }

    const convo = {
      participants: {
        me: me,
        other: other
      },
      conversations: conversations.sort((a, b) => {
        return a.date - b.date;
      })
    };

    return convo;
  }
}

conversation.component.ts ，导入前两个文件：

import { Component, OnInit } from "@angular/core";
import { ConversationService } from "../../shared/conversation/conversation.service";
import { User, Conversation } from "../../shared/conversation/conversation";
/*
import { NS_ROUTER_DIRECTIVES } from "nativescript-angular/router";
*/

@Component({
  selector: "conversation",
  providers: [ConversationService],
  // directives: [NS_ROUTER_DIRECTIVES],
  templateUrl: "views/views.html", // Linking directly to the tabview
})
export class ConversationComponent implements OnInit {
  public me: User;
  public other: User;
  public conversations: Array<Conversation>;
  public tabIndex: number;

    constructor(private conversationService: ConversationService) {
      const convo = conversationService.getConvo();

      this.me = convo.participants.me;
      this.other = convo.participants.other;
      this.conversations = convo.conversations;
      this.tabIndex = 0; // To be the landing tab
    }

    ngOnInit() {
      // Setting properties in page class
      // this.getConvo();
    }  

    /*
    getConvo() {
      this.conversationService.getConvo().then((conversations) => {
        this.conversations = conversations
      }).catch(function(error) {
        global.tnsconsole.error('error', error)
      })
    }
    */
}

这里的注释我已经模仿了AOSP布局中的打字稿设置，但不太确定如何真正实现它。有导入对象

{NS_ROUTER_DIRECTIVES}

我在本地nativescript-angular / router文件夹中找不到，也不知道怎么做。从哪里获得{NS_ROUTER_DIRECTIVES}？

tabview的模板 views.html ，用于显示会话组件及其他内容，引用链接的AOSP布局：

<TabView #tabView [selectedIndex]="tabIndex">

  <StackLayout *tabItem="{title: 'Conversation'}">
    <ActionBar title="Conversation">
      <ActionItem text="Menu" android.position="popup"></ActionItem>
    </ActionBar>

    <ListView class="threads-list" [items]="conversations">
      <template let-item="item">
        <GridLayout rows="auto" columns="auto,*" class="threads-wrapper">
          <Image row="0" col="0" [src]="item.sender.pictureUrl"></Image>
          <StackLayout row="0" col="1" orientation="vertical">
            <Label [text]="item.sender.name" class="item-title"></Label>
            <Label [text]="item.content"></Label>
            <Label [text]="item.date" class="convo-date"></Label>
          </StackLayout>
        </GridLayout>
      </template>
    </ListView>
  </StackLayout>

  <StackLayout *tabItem="{title: 'Tab Title'}">
    <Label text="Content to display"></Label>
  </StackLayout>

</TabView>

views.component.ts ：

import { Component } from "@angular/core";

@Component({
  selector: "views",
  templateUrl: "views/views.html"
})
export class ViewsComponent {
}

如何获取tabview中包含的视图上显示的对话数据？ app.component.ts中的模板是＆lt; page-router-outlet＆gt;＆lt; / page-router-outlet＆gt;。

以上配置显示没有tabview的数据，但不是。

任何有关AOSP布局的更新信息都将受到赞赏。

TabView中带有数据的AOSP消息传递布局

0 个答案: