ionic内联模板 ionic3还在用吗?

Posted 2023-05-12

参考技术A 一.ionic中路由管理介绍：
在单页应用中，路由的管理是很重要的环节。ionic.js没有使用AngularJS内置的ng-route路由，而是选择了AngularUI项目的ui-router模块。
ui-router的核心理念是将子视图集合抽象为一个状态机，导航意味着状态的切换。在不同的状态下，ionic.js渲染对应的子视图(动态加载的html片段)就实现了路由导航的功能。
二.ionic中内联模板介绍
HTML中常用的script标签在AngularJS中被重新定义了：除了原本的脚本声明功能之外，如果script元素的type属性定义为text/ng-template,则被称为内联模板。
内联模板在单页应用(SAP)开发中非常有用。SAP应用通常需要通过AJAX从后台载入众多的HTML片段。这些HTML片段都用文件存放的话，看起来会非常杂乱。使用内联模块，就可以把这些零散的HTML片段模板都集中在一个文件里，维护和开发的感觉都会好很多。
AngularJS在编译时会将内联模板的id属性值和其内容，分别作为key和value，存入$templateCache管理的hash表中。
内联模板的使用，常见的有几种情况：
使用ng-include指令
可以利用ng-include指令在HTML中直接使用内联模板，例如：
<div ng-include="'a.html'"></div>
注意：其中a..html是一个字符串常量，需要使用单引号包裹起来。
使用$templateCache服务
也可以直接使用$templateCache服务的方法get()从模板缓存中读出其内容：
var partial=$templateCache.get("a.html")

*ngFor 模板 Ionic 2 中的对象 [重复]

【中文标题】*ngFor 模板 Ionic 2 中的对象 [重复]

【英文标题】：*ngFor Object in template Ionic 2 [duplicate]

【发布时间】：2018-01-07 04:48:53

【问题描述】：

我有对象：

messages = [
    'One' : [
        'id' : 1,
        'id' : 2,
    ],
    'Two' : [
        'id' : 1,
        'id' : 2,
    ]
] ;

我已经尝试了下面的代码，但没有运行，请告诉我哪里做错了。

<div *ngFor="let message of messages">
    <div>KEY</div>
    <div *ngFor="let value of message">VALUE</div>
</div>

在代码中我需要显示 KEY 和 VALUE

我的解决方案

在组件中：

this.messages = data['messages'] ;
this.keys = Object.keys(data['messages']);

在视图中：

<div *ngFor="let key of keys">
    <div>key</div>
    <div *ngFor="let message of messages[key]">message['id']</div>
</div>

【问题讨论】：

NgFor 只支持绑定到数组等Iterables

【参考方案1】：

您可以使用How to iterate [object object] using *ngFor in Angular 2 中所示的管道

<div *ngFor="let message of messages">
    <div>KEY</div>
    <div *ngFor="let key of message | keys">message[key]</div>
</div>

【讨论】：

你是对的，我很抱歉。我可能是昏迷了

【参考方案2】：

如果您不想创建管道，您可以公开Object.keys，就像在this SO-answer 中一样。

您的组件：

@Component(
    ...
)
export class YourComponent
    objectKeys: any = Object.keys;
    messages: Array<any>;

    constructor()

    ...

HTML：

<div *ngFor="let message of messages">
    <div *ngFor="let key of objectKeys(message)">
        <div>KEY:  key </div>
        <div *ngFor="let val of message[key]"> val.id </div>
    </div>
</div>

输出：

KEY: One
1
2
KEY: Two
1
2