如何使用 Angular 在 NativeScript 中实现可见性答案

【问题标题】：How to implement visibility in nativescript with angular如何使用 Angular 在 NativeScript 中实现可见性
【发布时间】：2018-11-14 00:36:21
【问题描述】：

我有一个死的简单 nativescript 角度组件，我正在尝试设置可见性并且扩展 ContentView 似乎不起作用。

 <capture-component [visibility]="'collapse'" top="0" left="0"></capture-component>

 @Component({
  moduleId: module.id,
  templateUrl: './capture.component.html',
  selector: 'capture-component'
 })
 export class CaptureComponent extends ContentView {

 }

有人知道如何正确执行此操作吗？我尝试了各种折叠、“折叠”、折叠、绑定或未绑定等。有点令人沮丧，这很容易做到。我可以创建一个属性并设置 css，但如果可能的话，我宁愿使用框架。

【问题讨论】：

你试过[style.visibility]="'collapse'"吗？
您似乎可以只使用visibility="collapse" 或visibility="collapsed"，因为目前您没有将visibility 属性绑定到您的类中的属性。

标签： angular components nativescript visibility

【解决方案1】：

您必须在 CaptureComponent 中声明 Input() 可见性，然后在 capture.component.html 中使用它，例如

 <capture-component [visibility]="'collapse'" top="0" left="0"></capture-component>

假设您的 capture.component.html 以 GridLayout 开头，然后在您的 html 中

<GridLayout width="100%" height="100%" rows="auto,*" [visibility]="visibility">

在您的 .ts 文件中

import { Input } from '@angular/core';
 @Component({
  moduleId: module.id,
  templateUrl: './capture.component.html',
  selector: 'capture-component'
 })
 export class CaptureComponent extends ContentView {
 @Input() visibility: string;
 }

【讨论】：

我知道这会起作用，但我认为扩展 ContentView 已经为我做到了。也许我只是假设太多了。

【解决方案2】：

我最终只使用了 *ngIf，尽管我觉得在扩展任何 Base 视图时可见性应该可以工作。

【讨论】：