components 相关问题

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

如何在之前点击时显示特定产品及其详细信息的页面?反应

我正在尝试制作一个页面,显示之前单击的产品及其详细信息。我在理解如何实现这一目标时遇到了一些困难。我有一个 VinylClocks 和产品...

回答 1 投票 0

有没有办法将导入的组件转变成独立的组件?

我安装了下一个组件:https://github.com/orahul1/angular-audio-player 但是因为我使用 Angular 17,所以我开始使用独立组件。有没有办法使用转换该组件...

回答 1 投票 0

如何制作共享一个逻辑的部分组件?

我为我的项目创建了baseModal,它接受 header 、 body 、 footer 等参数作为 props 。 问题是,当我有实际的模态时,标题中应该有搜索栏,正文中应该有

回答 1 投票 0

无法将函数传递给客户端组件NextJS

我试图通过我的服务器组件将函数从我的文件夹 /app/api/updatePassword.js 传递到我的客户端组件。 这是我的 updatePassword.js: 从'@/services/AxiosSetup'导入api; 出口

回答 1 投票 0

index.html 中的 ng-controller 错误“名为“MainController”的控制器未注册”

我一直在寻找这个问题的答案有一段时间了,乍一看它似乎与 angularJS 的其他控制器注册问题类似,但我的

回答 1 投票 0

使用 TImage 绘画时出现问题。我已经在 TImage 上绘制了,但它没有被绘制

我在下面创建了一个示例组件。有 3 个 TPanel,每个 TPanel 包含 1 个 TImage。我希望图像按照代码中的指示自行绘制。这不会发生。 如果你构建这个组合...

回答 1 投票 0

使用 TImage 绘画时出现问题。我已指示图像自行绘制,但没有响应

我在下面创建了一个示例组件。有 3 个面板,每个面板包含 1 个 TImage。我希望图像按照代码中的指示自行绘制。这不会发生。如果你建造这个

回答 1 投票 0

‘TouchableOpacity’不能用作 JSX 组件。 “View”不是有效的 JSX 元素

‘TouchableOpacity’不能用作 JSX 组件。 其实例类型“TouchableOpacity”不是有效的 JSX 元素。 “render()”返回的类型在这些类型之间不兼容。 输入“我...

回答 3 投票 0

如何在JavaFX中的多个地方使用同一个组件?

我想在 MenuBar 和 ContextMenu 中使用相同的 MenuItem(两者具有相同的文本,将在相同的条件下启用/禁用,并将执行相同的任务)。我怎样才能实现...

回答 1 投票 0

Laravel Blade 属性未传递给组件或类

我有以下 HTML: < 我有以下 HTML: <div class="relative lg:inline-flex bg-gray-100 rounded-xl"> <x-dropdown> <x-slot:trigger> <button>.......</button> </x-slot:trigger> <x-dropdown-item href='/' :active="request()->is('/')">All</x-dropdown-item> @foreach($categories as $category) <x-dropdown-item href="category/{{ $category->slug }}" :active="request()->is('/category/'.$category->slug)"> {{ ucwords($category->name) }} </x-dropdown-item> @endforeach </x-dropdown> </div> 但是我的下拉项组件中未分配 active 属性: @props(['active' => false]) @php $classes = 'block text-left px-3 text-sm leading-5 hover:bg-blue-500 focus:bg-blue-500 hover:text-white focus:text-white'; if ($active) { dd($active); $classes .=' bg-blue-500 text-white'; } @endphp <a {{ $attributes(['class' => $classes]) }}>{{ $slot }}</a> 我希望当 active 属性设置为 true 时我的 dd 会触发,但它永远不会触发 我尝试制作一个 DropdownItem 类: <?php namespace App\View\Components; use Closure; use Illuminate\Contracts\View\View; use Illuminate\View\Component; class DropdownItem extends Component { /** * Create a new component instance. */ public function __construct(...$args) { dd($args); // $this->active = true; } /** * Get the view / contents that represent the component. */ public function render(): View|Closure|string { return view('components.dropdown-item', [ // 'active' => $this->active ]); } } 但是 $args 返回 [] 所以也没有属性,我不知道为什么,我检查了 laravel 10 的官方文档,但一切似乎都很好。如果我在课堂上手动设置为活动状态,一切都会正常 <x-dropdown-item href="category/{{ $category->slug }}" 而不是 <x-dropdown-item href="/category/{{ $category->slug }}" 无需上课即可解决问题。如果我添加一个类,类构造函数仍然没有获得活动属性。还在想办法

回答 1 投票 0

何时在 Angular 14 中使用独立组件或模块?

我想知道什么时候应该使用独立组件以及什么时候应该创建新模块。既然它是 Angular 中引入的新概念,那么使用它们的标准是什么? 我创建了一个...

回答 2 投票 0

Cordova Android Gradle Build 组件不兼容

我第一次尝试与 Cordova 建立一个新项目。我想在我连接的 Android 手机上测试该项目,但我在所需组件方面遇到问题并且不知道...

回答 1 投票 0

如何在wordpress中使用lit web组件?

我使用 npm 制作演示版 Web 组件。 我想在 WordPress 中使用该点燃的 Web 组件。 如何在wordpress中使用它们? WordPress 中的点亮组件..?

回答 1 投票 0

如何从组件属性推断类型?

我希望从initialValue prop 推断出FormValueType 类型。似乎很容易而且可能,但我不知道该怎么做。如果你能让我转向正确的方向,它就可以......

回答 1 投票 0

如何在表单编辑数据后自动刷新数据?

我有一个包含数据的部分,我添加了一个按钮来编辑数据。我点击按钮编辑数据,我在表单中编辑数据,但是该部分的数据没有自动刷新,我有...

回答 1 投票 0

如何从组件属性推断类型? [打字稿,反应]

我希望从initialValue prop 推断出FormValueType 类型。似乎很容易而且可能,但我不知道该怎么做。如果你能让我转向正确的方向,它就可以......

回答 1 投票 0

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 非常感谢您的支持和评论

回答 3 投票 0

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

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

回答 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 文件中。

回答 1 投票 0

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

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

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.