非Angular环境下NativeScript是否有*ngIf指令的替代方案？

Absolutely! In vanilla NativeScript (no Angular dependency, i.e., NativeScript Core), you have several solid alternatives to Angular's *ngIf for showing/hiding or creating/removing DOM elements. Here are the most practical approaches tailored to different use cases:

1. Control Visibility (Show/Hide, Element Remains in DOM) #

If you just need to toggle visibility without fully removing the element from the DOM (similar to Angular's [hidden] but optimized for NativeScript), use the visibility property. This is perfect for scenarios where you might need to show the element again later without reinitializing its state.

Example XML:

<StackLayout>
  <Label text="I'm toggleable!" visibility="{{ isVisible ? 'visible' : 'collapsed' }}" />
  <Button text="Toggle Visibility" tap="{{ toggleVisibility }}" />
</StackLayout>

Corresponding TypeScript:

import { Observable } from "@nativescript/core";

export class MyViewModel extends Observable {
  isVisible = true;

  toggleVisibility() {
    this.isVisible = !this.isVisible;
    this.notifyPropertyChange("isVisible", this.isVisible);
  }
}

Note: Using collapsed will remove the element's space from the layout, while hidden keeps the space but hides the content—pick the one that fits your layout needs.

2. Dynamically Add/Remove Elements (True DOM Creation/Removal) #

For the exact equivalent of *ngIf (where the element is fully removed from the DOM when the condition is false, and recreated from scratch when true), you can manually manipulate the view hierarchy via code.

Step 1: Add a container in XML #

<StackLayout id="dynamicContainer" />
<Button text="Toggle Dynamic Element" tap="{{ toggleDynamicElement }}" />

Step 2: Control the element in TypeScript #

import { Observable, Label, StackLayout, Page } from "@nativescript/core";

export class MyViewModel extends Observable {
  private _showDynamicElement = false;
  private container: StackLayout;

  constructor(private page: Page) {
    super();
    this.container = page.getViewById<StackLayout>("dynamicContainer");
  }

  toggleDynamicElement() {
    this._showDynamicElement = !this._showDynamicElement;
    
    if (this._showDynamicElement) {
      // Create and add the element
      const dynamicLabel = new Label();
      dynamicLabel.text = "I'm dynamically added to the DOM!";
      this.container.addChild(dynamicLabel);
    } else {
      // Remove all children (or target a specific element if needed)
      this.container.removeChildren();
    }
  }
}

3. Repeater Trick for XML-Based Conditional Rendering #

If you prefer keeping your template logic in XML instead of building elements in code, a clever workaround is using a Repeater with a single-item array (when the condition is true) or an empty array (when false). This mimics *ngIf's DOM creation/removal behavior entirely in your markup.

Example XML:

<Repeater items="{{ showElement ? [{}] : [] }}">
  <Repeater.itemTemplate>
    <StackLayout>
      <Label text="I only exist in the DOM when showElement is true" />
      <Image src="~/assets/app-icon.png" class="icon" />
    </StackLayout>
  </Repeater.itemTemplate>
</Repeater>
<Button text="Toggle Element" tap="{{ toggleShowElement }}" />

TypeScript:

import { Observable } from "@nativescript/core";

export class MyViewModel extends Observable {
  showElement = false;

  toggleShowElement() {
    this.showElement = !this.showElement;
    this.notifyPropertyChange("showElement", this.showElement);
  }
}

Quick Decision Guide #

• Use visibility for simple show/hide where preserving element state matters.
• Use dynamic DOM manipulation for full control over element lifecycle (great for complex components).
• Use the Repeater trick if you want to keep conditional logic in your XML template.

内容的提问来源于stack exchange，提问作者Ihor Khomiak