В документе angular 2, * и шаблоне мы знаем, что * ngIf, * ngSwitch, * ngFor можно расширить до тега ng-template. У меня вопрос:
Я думаю, что ngIf
или ngFor
без него *
также можно перевести и расширить до тега шаблона с помощью углового движка.
Следующий код
<hero-detail *ngIf="currentHero" [hero]="currentHero"></hero-detail>
будет таким же, как
<ng-template [ngIf]="currentHero">
<hero-detail [hero]="currentHero"></hero-detail>
</ng-template>
Так зачем создавать странный символ звездочки ( *
) в angular 2?
javascript
angular
angular-directive
максисакодер
источник
источник
<template>
теги, потому что*
синтаксис префикса позволял нам пропустить эти теги и сосредоточиться непосредственно на элементе HTML, который мы включаем, исключаем или повторяем.Ответы:
Синтаксис Asterisk - это синтаксический сахар для более многословного синтаксиса шаблона, который директива расширяется под капотом, вы можете использовать любой из этих параметров.
Цитата из документов :
источник
ngIf="expression"
Это не привязка ввода. Если вы получите значение из DOM, это будет строка. 2. Фреймворк необходимо знать и оngIf
других особых случаях. Конечно, указание логического атрибута где-нибудь в DDO подойдет, но вам нужно изучить код / документацию, чтобы узнать разницу между обычным атрибутом и структурным директивным сахаром. 3. Квадратные скобки, асериск, круглые скобки и их отсутствие четко передают происходящее читателю шаблонов.Angular2 предлагает особый вид директив - Структурные директивы.
Структурные директивы основаны на
<template>
теге.*
До атрибута селектора указывает на то, что структурная директива должна быть применена вместо обычной директивы атрибута или свойства связывания. Angular2 внутренне расширяет синтаксис до явного<template>
тега.Поскольку final существует также
<ng-container>
элемент, который можно использовать аналогично<template>
тегу, но поддерживает более распространенный сокращенный синтаксис. Это, например, требуется, когда две структурные директивы должны применяться к одному элементу, что не поддерживается.<ng-container *ngIf="boolValue"> <div *ngFor="let x of y"></div> </ng-container>
источник
Angular особым образом обрабатывает элементы шаблона.
*
Синтаксис ярлык , который позволяет аннулированию писать весь<template>
элемент. Позвольте мне показать вам, как это работает.используя это
*ngFor="let t of todos; let i=index"
обезвоживает его в
template="ngFor: let t of todos; let i=index"
который обессахаривает в
<template ngFor [ngForOf]="todos" .... ></template>
также структурные директивы angular, такие как ngFor, ngIf и т. д., с префиксом,
*
просто чтобы отличаться от этих пользовательских директив и компонентовподробнее здесь
https://vsavkin.com/angular-2-template-syntax-5f2ee9f13c6a#.rcffirs7a
источник
Из документов Angular :
Структурные директивы отвечают за верстку HTML. Они формируют или изменяют структуру DOM, обычно путем добавления, удаления или изменения элементов.
Структурные директивы легко распознать. Звездочка (*) предшествует имени атрибута директивы, как в этом примере.
<p *ngIf="userInput">{{username}}</p>
источник
Иногда может понадобиться,
<a *ngIf="cond">
например, когда это всего один тег. иногда вы можете захотеть поместить ngIf вокруг нескольких тегов, не имея реального тега в качестве оболочки, которая приведет вас к<template [ngIf]="cond">
тегу. как angular может узнать, должен ли он отображать владельца директивы ngIf в конечном результате html или нет? так что это нечто большее, чем просто сделать код более понятным. это необходимая разница.источник