components 相关问题

统一建模语言中的一个组件“代表系统的模块化部分，它封装了其内容，其表现形式可在其环境中替换。组件根据提供的和所需的接口定义其行为”。组件的最佳示例可以在ActionScript-Flash，Flex sdks中找到。你有UI组件，如按钮，标签，DataGrids，可重复使用的图表，可分发等。

Angular Routing：避免更改 url 后破坏活动组件？

为了澄清/更好的问题：点击 ` [routerLink]="['/ComponentB'] 将导致 ComponentB 的另一个实例显示在为了澄清/更好的问题：点击 ` [routerLink]="['/ComponentB'] 将导致 ComponentB 的另一个实例显示在中 <router-outlet></router-outlet> 这种行为是我想避免的，因为我喜欢重用应链接到路由器出口的现有实例。如果您有一个公式集合，它处理几个 ng 组件，这些组件基本上构建在类对象的集合/数组上，可容纳大约。 10 个道具，例如包括输入值、标称值以及至少单位和布尔值……，因此为了保持页面状态（输入+结果）会重复很多东西。因此，我用*ngif模拟了一个路由，显示单页面的相关部分（组件），但不改变url。 <div *ngIf="visibleComponentA> ... All part of ComponetA ></div> CpmponetA.html <div *ngIf="visibleComponentB> ... All part of ComponetB ></div> CpmponetB.html 这个布尔值将在组件的相关代码中设置： @Input()visibleComponentA: boolean = true; ComponetA.ts 现在在首页 <div (click)="OnClickNav(visibleComponentA)" >ComponentA</div> <div (click)="OnClickNav(visibleComponentB)" >ComponentB</div> app.component.html 以及方法 OnClickNav(Selected:NavFlags) 切换组件的正确可见状态。 OnClickNav(Selected:NavFlags){ Selected.NavStatus=!Selected.NavStatus Selected.NavItem=='visibleComponetA'? this.visibleComponetA.NavStatus=Selected.NavStatus: this.visibleComponetA.NavStatus= false; Selected.NavItem=='visibleComponetB'? this.visibleComponetB.NavStatus=Selected.NavStatus: this.visibleComponetB.NavStatus= false; app.commonet.ts 类 NavFlags 很简单 export class NavFlags { NavItem: string = ''; NavStatus: boolean = false; constructor(NavItem: string, NavStatus: boolean) { this.NavItem = NavItem; this.NavStatus = NavStatus; } } nav-flags.ts 这样，“单独”页面就不会留下任何数据丢失。我没有重复的商店。通过单击按钮，可以在组件中浏览页面而不会丢失数据。这个 hack 并不完美，所以也许会有更好的方法来解决这个角度问题。要一次在一页上显示两个组件，您可以使用不同的 outlets。 const routes: Routes = [ { path: 'A', component: AComponent }, { path: 'B', component: BComponent, outlet: 'secondRouter' } ]; 并在您的 HTML 中： <router-outlet></router-outlet> <router-outlet name='secondRouter'></router-outlet> 查看此StachBlitz了解更多详情。我认为这可能是一个比看起来更大的问题。然而，仍然有希望，我希望你遵循 Angular 指南并相应地构建组件，并在你的路由配置中拥有一个带有 entryComponent 组件的模块。 THAT entryComponent 将是模块的主要入口组件，您可以在路由时存储组件信息。所以也许你可以尝试在主组件中创建组件，主组件将保留它创建的组件的信息。但请注意，如果您在模块之间切换，这将不起作用。另一种可能的解决方案是利用服务来存储您需要的数据。这个组件：Kragarm ... public W = new VariableUnitBuilder('W', 'mm³', 0, 'Widerstandsmoment', 'W', false,'xW',false, 'Wy','Wx'); ... ngOnInit(): void { /*Staffolding the Html */ this.variableList.push( this.F, this.L, 'br', this.Mt, this.Szul, 'br', this.Werf, this.W, 'br', this.S, 'br', this.factor, this.fzul, 'br', this.Ierf, this.I, 'br', this.f, 'br' ); if ( this.storeVar[this.RouteName+'Count'] < 1){ this.storeVar[this.RouteName] =this.variableList} this.variableList= this.storeVar.Kragarm this.storeVar[this.RouteName+'Count']++ this.BerechnungsName = this.htmlButtonName; } // END OF ON IN Kragarm.component.ts 这是 VariableUnitBuilder 的接口 export interface IVariableUnitBuilder { varName: string; varLabel: string; varSymbol: string; unitBase: string; unit: string; scaleSelect: number; inputStr: string; inputValue: number; nominalValue: number; ergebnis: boolean; showStr: string; showValue: number; nominalValueOld: number; fixActiv: boolean; fixStatus: boolean; fixLabelStr: string; fixTrueLabel: string; fixFalseLabel: string; fixGroup: string; } 这就是服务： import { Injectable } from '@angular/core'; import {IVariableUnitBuilder} from "../../../shared/_intefaces/IVariableUnitBuilder"; @Injectable({ providedIn: 'root' }) export class BiegebalkenService { public Kragarm: IVariableUnitBuilder[] public KragarmCount: number=0 constructor() { } } Biegeblaken.service.ts（在溢出的子 Biegebalken.module.ts 旁边）这是组件 Kragarm.component.ts 的相关 HTML ... <table *ngFor="let variable of variableList; let i = index "> <tr *ngIf=" (variable).varName != undefined "> <td class="Spalte1"> <input [(ngModel)]='variable.varLabel' class='inputLabel' jgInputStringRestriction > </td> .... Kragarm.component.html 这是 app.component.html 中的主要 HTML ... <div [routerLink]="['/Kragarm']" class="Route">Kragarm</div> ... app.component.ts 非常感谢您的支持和评论

angular routes components

回答 3 投票 0

在React中调用两个onClick函数，函数独立工作，但同时调用时则不同

我有一个带有按钮的导航，每个按钮代表一个类别。单击按钮时，作为父文件中的 prop 传递给导航组件的 setActive 函数会触发不同的类别...

javascript reactjs asynchronous react-hooks components

回答 1 投票 0

请检查为什么导入反应不起作用

从“react”导入React；从“react-dom”导入ReactDOM；函数头(){ 返回（ <... import React from "react"; import ReactDOM from "react-dom"; function Header(){ return( <header> <nav className="nav"> <img src="react.png" className="nav-logo"></img> <ul className="nav-items"> <li>Pricing</li> <li>About</li> <li>Contact</li> </ul> </nav> </header> ) } function Footer(){ return( <footer className="footer"> <small><p className="foot-text">all rights reserved.</p></small> </footer> ) } function MainContent(){ return( <div className="main-content"> <h1 className="main-head">I LOVE REACT! because:</h1> <ol> <li>it is declarative</li> <li>we can work on composable pieces and then<br/>bind them together to make a whole.</li> <li>it supports dynamic rendering</li> <li>supports jsx</li> </ol> </div> ) } function Page(){ return( <> <Header/> <MainContent/> <Footer/> </> ) } //<> </> =fragment <div> can also be used ReactDOM.render(<Page/>,document.getElementById("root")); 实际上输出不会渲染到屏幕上，但如果我将 cdns 包含到 html 中并注释导入语句，那么它就可以完美工作 html 文件中导入的cdns 为： <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> 错误 (node:18960) 警告：要加载 ES 模块，请在 package.json 中设置 "type": "module" 或使用 .mjs 扩展名。（使用 node --trace-warnings ... 显示警告的创建位置） c:\Users\KIIT\Desktop\PROJECTS\React codecamp\index.js:1 从“反应”导入反应； ^^^^^^ 语法错误：无法在模块外部使用 import 语句在internalCompileFunction（节点：内部/vm：77：18）在wrapSafe（节点：内部/模块/cjs/loader：1288：20）在 Module._compile （节点：内部/模块/cjs/loader：1340：27）在 Module._extensions..js （节点：内部/模块/cjs/loader：1435：10）在Module.load（节点：内部/模块/cjs/loader：1207：32）在 Module._load （节点：内部/模块/cjs/loader：1023：12）在 Function.executeUserEntryPoint [作为 runMain] （节点：内部/模块/run_main：135：12）在节点：内部/主/run_main_module：28：49 Node.js v20.10.0 将 "type":"module" 添加到您的 package.json 文件中。

reactjs user-interface frontend components jsx

回答 1 投票 0

MAUI - 以编程方式更改子对象

我想通过某些属性背后的代码进行更改（从数据库获取数据）... 作为测试，我尝试过这个解决方案查看 v = this.Content; 列表元素 = (列表<

dynamic components maui child-objects

回答 1 投票 0

Delphi TWinControl 在运行时复制其子级

当我构建这个组件并将其放置在表单上时，一切看起来都很好。但是，当我运行该程序时，该控件会复制其所有子项。它似乎正在调用初始化组件...

delphi duplicates components vcl oncreate

回答 1 投票 0

react-select：如何在检查器中设置样式时保持下拉列表打开？

我正在使用react-select并且正在自定义它，我没有找到执行此操作的选项。当我设计样式时，是否可以使用一些解决方法来保持下拉列表打开？

reactjs npm components react-select

回答 12 投票 0

TWinControl 组件不响应表单大小调整的问题

我有一个用Delphi 10.4编写的可视化控件。为了方便地关注问题，我仅创建了具有 Anchors 和 Align 属性的 TwinControl。我包括了 AutoSize 属性。 ...

delphi components alignment anchor vcl

回答 1 投票 0

layout.blade.php 中的$slot 显示未定义变量错误

我有layout.blade.php，位于resources/view/components/admin/layout/layout.blade.php。我有 home.blade.php 位于 resources/view/components/admin/home/home.blade.php 中。我...

laravel components

回答 1 投票 0

错误：缺少 JavaFX 运行时组件，需要使用 eclipse 在生成的 jar 中运行此应用程序

在命令提示符下或双击运行 JavaFX jar 文件时出现上述错误。我希望 jar 文件像应用程序一样通过双击它来运行。我试过了

java javafx components runtime executable-jar

回答 1 投票 0

可共享的 Vite/Vue 组件 - 为什么我会收到有关缺少 CSS 导出的错误？

我一直在关注这个视频，通过 Vite 构建一个可共享的 Vue 组件，然后我通过 npm 将其链接到另一个项目来进行测试。通过 npm run bulid 使用 Vite 构建后，然后链接...

vue.js npm components vite

回答 1 投票 0

如何在 Angular 17 中将嵌套组件与独立组件一起使用？

既然 Angular 现在有了独立的组件，我们如何像以前一样在另一个组件中显示一个组件。例如在应用程序主体内部我不知道独立组件如何工作，而且我是一个朋友......