angular-flex-layout 相关问题


无需封闭标签的角度内容投影

有没有一种方法可以实现不包含标签的内容投影? 这是我的组件: 有没有一种方法可以实现不包含标签的内容投影? 这是我的组件: <div class="flex flex-column container"> <div class="flex flex-column header"> <ng-content select="[header]"></ng-content> </div> <div class="flex flex-column body"> <ng-content></ng-content> </div> <div class="flex flex-column footer"> <ng-content select="[footer]"></ng-content> </div> </div> 请注意,有两个可能的插槽 header 和 footer。这些组件应该这样使用: <div header>Header</div> Body <div footer>Footer</div> 如果没有这个div我该如何使用这个组件?我的意思是,我只想添加内容,因为如果我添加 div,它可能会破坏布局。 您可以尝试在 ngProjectAs 标签上使用 ng-container 属性: <ng-container ngProjectAs="[header]">Header</ng-container> Body <ng-container ngProjectAs="[footer]">Footer</ng-container> 更多相关内容请参见 Angular 文档


Angular Material 6 网格列表对齐项目并将内容对齐到 flex-start

我正在尝试使用 Angular Material 6 动态网格列表。与文档相关的示例将网格的内容放在每个图块的中心。请参阅此处的示例 我想要内容进去...


将 2 个弹性列合并为 1 个交替的子列

我有一个有 2 列的弹性容器。 每列也是一个弹性容器,里面有许多盒子。 我有一个 flex 容器,有 2 列。 每列也是一个弹性容器,里面有许多盒子。 <div class="flex-container"> <div class="column left-column"> <div class="box boxA">Box A</div> <div class="box boxB">Box B</div> </div> <div class="column right-column"> <div class="box boxC">Box C</div> <div class="box boxD">Box D</div> <div class="box boxE">Box E</div> </div> </div> 我希望在移动视图中,2 列变成 1。 现在,我通过将 flex-direction: column 添加到 flex-container 来实现这一点,这使得 2 列彼此重叠(垂直,而不是 z 轴)。 .flex-container { display: flex; gap: 10px; padding: 10px; max-width: 800px; } .column { display: flex; flex-direction: column; flex: 1; gap: 10px; } .left-column { flex: 2; } .right-column { flex: 1; } .box { border: 1px solid lightgrey; border-radius: 8px; padding: 8px; } @media (max-width: 800px) { .flex-container { flex-direction: column; } } 但现在我还需要重新排列框的顺序,以便在移动视图中显示为 A、C、D、E、B。 我认为仅使用 CSS 无法实现这一点,因为它需要“破坏”弹性列。 这是我目前拥有的沙箱:https://codepen.io/marcysutton/pen/ZYqjPj 顺便说一句,这是在 React 应用程序中,所以我可能必须以编程方式重新排列框。 如果可能的话,我只是更喜欢使用 CSS 来做到这一点。 在下部宽度处使用 display: contents“破坏”包装 div,然后在 order 上使用 .boxB。 .flex-container { display: flex; gap: 10px; padding: 10px; max-width: 800px; } .column { display: flex; flex-direction: column; flex: 1; gap: 10px; } .left-column { flex: 2; } .right-column { flex: 1; } .box { border: 1px solid lightgrey; border-radius: 8px; padding: 8px; } @media (max-width: 800px) { .flex-container { flex-direction: column; } .column { display: contents; } .boxB { order: 2; } } <div class="flex-container"> <div class="column left-column"> <div class="box boxA">Box A</div> <div class="box boxB">Box B</div> </div> <div class="column right-column"> <div class="box boxC">Box C</div> <div class="box boxD">Box D</div> <div class="box boxE">Box E</div> </div> </div>


Angular Material 2:修复多行错误消息

我在我的角度应用程序中使用角度材料2。当我的表单输入字段错误消息超过一行时,我遇到了问题。这是照片: 这是代码: 我在我的角度应用程序中使用角度材料 2。当我的表单输入字段错误消息超过一行时,我遇到了问题。这是照片: 这是代码: <md-error *ngIf="password.touched && password.invalid"> <span *ngIf="password.errors.required"> {{'PASSWORD_RECOVERY.FIELD_REQUIRED' | translate}} </span> <span *ngIf="password.errors.minlength || password.errors.maxlength"> {{'PASSWORD_RECOVERY.PASSWORD_LENGTH' | translate}} </span> <span *ngIf="password.errors.pattern"> {{'PASSWORD_RECOVERY.FOR_A_SECURE_PASSWORD' | translate}} </span> </md-error> 我通过阅读 github 了解到,这是 Angular 2 材料中的一个错误。有人通过自定义解决方法成功解决了这个问题吗? 问题是类为 .mat-form-field-subscript-wrapper 的元素是 position: absolute,所以它不占用实际空间。 按照 xumepadismal 在 github 上关于此问题的建议,您可以添加此 scss 作为解决我的问题的解决方法: // Workaround for https://github.com/angular/material2/issues/4580. mat-form-field .mat-form-field { &-underline { position: relative; bottom: auto; } &-subscript-wrapper { position: static; } } 它会转换静态 div 中的 .mat-form-field-subscript-wrapper 节点,并将 .mat-form-field-unterline 重新定位在输入字段之后。 正如材料 15 中在 github 讨论中提到的,可以通过将 subscriptSizing="dynamic" 添加到 mat-form-field 来解决问题。 要更改默认行为,您必须使用以下选项更新 angular.module.ts 提供程序: providers: [ { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { subscriptSizing: 'dynamic' } } ] 这也可以在材料文档中找到 使用@mattia.corci提出的解决方案会导致错误消息被推到底部太多,从而在顶部留下不必要的空白空间。 使用 Tailwind CSS,这个解决方案对我来说适用于最新的 Angular 17: .mat-mdc-form-field { @apply w-full self-start; .mat-mdc-form-field-subscript-wrapper { @apply flex; .mat-mdc-form-field-error-wrapper { @apply static; } } } mat-form-field.ng-invalid.ng-touched { animation: example; animation-duration: 0.3s; margin-bottom: 20px; } @keyframes example { from { margin-bottom: 0; } to { margin-bottom: 20px; } } 它对我有用。


AppEngine Flex 部署失败 - flex_await_healthy ... /bin/sh:gunicorn:未找到

我尝试使用自定义运行时构建AppEngine Flex实例,包含 Python 3.11 火狐浏览器 因此,在运行 pip 来安装依赖项时,出现了我正在运行 pipas root 的警告,...


从 Angular 16 转换为 Angular 17 后缺少 SSR 支持

我已将我的项目从 Angular 16 升级到 Angular 17。但是,我目前没有收到服务器端渲染 (SSR) 的支持。从 Angular 16 迁移后,Angular 是否提供 SSR 支持...


使用自定义 python 和 virtualenv 的 AppEngine Flex 实例部署失败

我尝试使用自定义运行时构建AppEngine Flex实例,包含 Python 3.11 火狐浏览器 因此,在运行 pip 来安装依赖项时,出现了我正在运行 pipas root 的警告,...


如何在 Flex 容器下方添加图像,同时使两个元素都能响应媒体查询?

我是 Flexbox 新手,非常想在 Flex 容器下方添加一个单独的独立图像。我希望“底部”元素的图像和容器的元素都是


如何让最后一项仅在换行到下一行时才填充剩余空间

我有一个带有 flex-wrap:wrap 集的 Flex 容器。有没有办法让最后一个弹性项目(示例中的“未知”按钮)仅在换行到新行时才填充剩余空间?它...


如何使用 Tailwind CSS 实用程序类使部分粘性

在我的 Next.js Web 应用程序中,我有一个页面,如下所示: 我想让该部分(用 标签包裹)以蓝色粘性突出显示,这样当我滚动时,它会保持在原来的位置,并且只有 m... 在我的 Next.js Web 应用程序中,我有一个页面,如下所示: 我想使该部分(包含在 <aside> 标签中)以蓝色粘性突出显示,这样当我滚动时,它会保持在原来的位置,并且只有主要部分(包含图表的部分)会滚动。 这是 layout.tsx 文件: import { dashboardConfig } from "@/config/dashboard"; import { MainNav } from "@/components/nav/main-nav"; import { DashboardNav } from "@/components/nav/dashboard-nav"; interface DashboardLayoutProps { children?: React.ReactNode; } export default async function DashboardLayout({ children, }: DashboardLayoutProps) { return ( <div className="flex min-h-dvh flex-col relative"> <header className="container z-40 bg-background"> <MainNav /> </header> <div className="container grid flex-1 gap-12 md:grid-cols-[200px_1fr] mt-32 mb-12 relative"> <aside className="hidden w-[200px] flex-col md:flex sticky top-0"> <DashboardNav items={dashboardConfig.sidebarNav} /> </aside> <main className="flex w-full flex-1 flex-col overflow-hidden"> {children} </main> </div> </div> ); } 请注意,我已将类 sticky 和 top-0 应用于我想要粘贴位置的部分。但它不起作用。 我做错了什么? 考虑通过 align-self: start 将 self-start 应用到粘性元素。默认情况下,它将具有 align-self: stretch,这将使其成为其父网格元素的完整高度,因此不会观察到粘性效果。通过应用 align-self: start,它的高度将仅与其内容一样高,如果存在垂直自由空间,则可以观察到粘性效果。 const dashboardConfig = { sidebarNav: '' }; const MainNav = () => 'MainNav'; const DashboardNav = () => 'DashboardNav'; function DashboardLayout({ children, }) { return ( <div className="flex min-h-dvh flex-col relative"> <header className="container z-40 bg-background"> <MainNav /> </header> <div className="container grid flex-1 gap-12 md:grid-cols-[200px_1fr] mt-32 mb-12 relative"> <aside className="hidden w-[200px] flex-col md:flex sticky top-0 self-start"> <DashboardNav items={dashboardConfig.sidebarNav} /> </aside> <main className="flex w-full flex-1 flex-col overflow-hidden"> {children} </main> </div> </div> ); } function App() { return ( <DashboardLayout> <div class="h-[200vh]"></div> </DashboardLayout> ); } ReactDOM.createRoot(document.getElementById('app')).render(<App/>); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdn.tailwindcss.com/3.4.1"></script> <div id="app"></div>


我可以在 Flex 帐户中使用主要 Twilio 帐户中的电话号码吗?

我有一个主 Twilio 帐户,用于管理我的电话号码,目前我正在探索 Twilio Flex 来满足我的联络中心需求。是否可以使用我的主要 Twilio 帐户中的电话号码...


Angular CLI 版本与 Angular Core 版本之间的兼容性?

有什么方法可以知道要安装哪个与我的 Angular Core 版本兼容的 Angular CLI 版本?他们完全独立吗? 使用 Core v5.2.8 开发现有的 Angular 应用程序...


安装 Angular CLI 时出现 Npm Angular 警告

当我尝试通过以下方式安装 CLI 时收到 npm 警告: npm install -g @angular/cli: C:\Users\myuser>npm install -g @angular/[email protected] npm 警告已弃用 [email protected]:此模块...


Angular 17 中的 NG 块 UI

我尝试在 Angular 17 中使用 NG Block UI 并收到此错误 ng block ui error in Angular 17 知道这个模块在 Angular 17 中如何工作吗? 提前致谢 我使用 npm i ng-


Angular Material v17:缺少“MatFormFieldAppearance”中的“遗产”

在 Angular Material v14 中,MatFormFieldAppearance 提供了传统、标准、填充和轮廓值。 类型 MatFormFieldAppearance = '旧版' | '标准' | '填充' | '大纲'; 然而,在 Angular


单击 p 标签旁边的按钮时获取 p 标签的内部文本(无 Jquery)

我有几个盒子,每个盒子都包含按钮和一个 元素,其内部文本是由 API 中的数据创建的。我在每个框上放置了一个 onclick(包裹 的 ) 我有几个盒子,每个盒子都包含按钮和一个 <p> 元素,其内部文本是由 API 中的数据创建的。我在每个框上放置了一个 onclick(包裹 <div> 元素和按钮的 <p>)。我希望每次单击该按钮时,位于该按钮旁边(位于同一 div 中)的 innerText 标签的 <p> 都会控制台日志。目前无法弄清楚,这就是我到目前为止所得到的: const containerShapes = document.getElementById("container-pock-shape") fetch("https://pokeapi.co/api/v2/pokemon-shape") .then(res => res.json()) .then(data => data.results.map(item => { return containerShapes.innerHTML += `<div class="shape-box" onclick="showName(event)"> <p>${item.name}</p> <button>Select</button> </div>` })) function showName(e) { console.log() } #container-pock-shape { display: flex; flex-wrap: wrap; } .shape-box { border: 2px solid red; display: flex; flex-direction: column; align-items: center; padding: 10px; width: 200px; } .shape-box p { background-color: grey; width: 100px; text-align: center; font-weight: 900; } <body> <div id="container-pock-shape"> </div> </body> 您可以使用最近的。当您需要 forEach 或正确使用地图时也不要使用地图 我还强烈建议授权(点击 div) const containerShapes = document.getElementById("container-pock-shape") fetch("https://pokeapi.co/api/v2/pokemon-shape") .then(res => res.json()) .then(data => containerShapes.innerHTML = data.results .map(({name}) => `<div class="shape-box"> <p>${name}</p> <button>Select</button> </div>`)); containerShapes.addEventListener("click", e => { const tgt = e.target.closest("button") if (tgt) console.log(tgt.closest("div.shape-box").querySelector("p").innerText) }) #container-pock-shape { display: flex; flex-wrap: wrap; } .shape-box { border: 2px solid red; display: flex; flex-direction: column; align-items: center; padding: 10px; width: 200px; } .shape-box p { background-color: grey; width: 100px; text-align: center; font-weight: 900; } <body> <div id="container-pock-shape"></div> </body> 要获取名称,由于事件位于整个 div 上,因此您需要使用 querySelector 并找到内部 <p> 元素并获取其文本。 const containerShapes = document.getElementById("container-pock-shape") fetch("https://pokeapi.co/api/v2/pokemon-shape") .then(res => res.json()) .then(data => data.results.map(item => containerShapes.innerHTML += `<div class="shape-box" onclick="showName(this)"> <p>${item.name}</p> <button>Select</button> </div>` )) function showName(box) { const name = box.querySelector('p').textContent; console.log(name); } #container-pock-shape { display: flex; flex-wrap: wrap; } .shape-box { border: 2px solid red; display: flex; flex-direction: column; align-items: center; padding: 10px; width: 200px; } .shape-box p { background-color: grey; width: 100px; text-align: center; font-weight: 900; } <body> <div id="container-pock-shape"></div> </body> 执行此操作的另一种方法是将单击事件仅添加到按钮,然后查找 closest 形状框,然后找到 <p>。 const containerShapes = document.getElementById("container-pock-shape") fetch("https://pokeapi.co/api/v2/pokemon-shape") .then(res => res.json()) .then(data => data.results.map(item => containerShapes.innerHTML += `<div class="shape-box"> <p>${item.name}</p> <button onclick="showName(this)">Select</button> </div>` )) function showName(button) { const name = button.closest('.shape-box').querySelector('p').textContent; console.log(name); } #container-pock-shape { display: flex; flex-wrap: wrap; } .shape-box { border: 2px solid red; display: flex; flex-direction: column; align-items: center; padding: 10px; width: 200px; } .shape-box p { background-color: grey; width: 100px; text-align: center; font-weight: 900; } <body> <div id="container-pock-shape"></div> </body> 嘿,我最近找到了解决此问题的简单方法(当然,如果您的文本不像按钮文本那样太长):您可以将内部文本作为元素的 id 提供。并且在事件处理程序中,您可以通过以下方式访问内部文本:这样:e.target.id希望这个解决方案可以帮助你:)


Angular“ng 生成组件”复制组件

由于某种原因,自从从 Angular 13 升级到 Angular 15 后,当我输入: ng g c 某些组件 Angular 复制组件,创建重复文件。这种情况 100% 都会发生。第二次...


为什么NLog不每天归档

NLog 存档每天都不起作用。但它每分钟都有效 NLog版本5.0.7 这是我的配置 NLog 每天存档不起作用。但它每分钟都有效 NLog版本5.0.7 这是我的配置 <target name="Httpfile" layout="${longdate} ${uppercase:${level}} correlationId-${activityid} - ${message} ${exception:format=tostring}" xsi:type="File" fileName="${logFullName}-http-api-${shortdate}.log" archiveFileName="${logFullNameArchive}-archive-Http-api-${shortdate}-{#####}.zip" archiveEvery="Day" concurrentWrites="true" keepFileOpen="false" archiveNumbering="DateAndSequence" maxArchiveFiles="30" maxArchiveDays="7" enableArchiveFileCompression="true" /> 使用 archiveEvery="Minute" 效果很好 不支持在NLog FileTarget中混合静态和动态归档逻辑。 使用静态归档逻辑时,不应在 ${shortdate} 和 fileName="..." 中使用 archiveFileName="..."。 像enableArchiveFileCompression="true"这样的一些功能仅受静态归档逻辑支持: <target name="Httpfile" layout="${longdate} ${uppercase:${level}} correlationId-${activityid} - ${message} ${exception:format=tostring}" xsi:type="File" fileName="${logFullName}-http-api.log" archiveFileName="${logFullNameArchive}-archive-Http-api-{#####}.zip" archiveNumbering="DateAndSequence" archiveDateFormat="yyyyMMdd" archiveEvery="Day" concurrentWrites="true" keepFileOpen="false" maxArchiveFiles="30" maxArchiveDays="7" enableArchiveFileCompression="true" /> 另请参阅:https://github.com/NLog/NLog/wiki/FileTarget-Archive-Examples


将 props 传递给 nextjs 中的页面组件

我正在使用 nextjs 的 withlayout 函数为某些页面添加侧边栏。 导出类型 PageWithLayout = NextPage & { withLayout?:(页面:ReactElement)=> 我正在使用 nextjs 的 withlayout 函数为某些页面添加侧边栏。 export type PageWithLayout<P = {}, IP = P> = NextPage<P, IP> & { withLayout?: (page: ReactElement) => ReactNode; }; 这是我的使用方法: export const Interactions: PageWithLayout = () => { const [ getInteractions, { data: interactionData, fetchMore, variables, loading: isInteractionsLoading, error: isInteractionsError, }, ] = useGetInteractionsLazyQuery({ notifyOnNetworkStatusChange: true, fetchPolicy: "network-only", ssr: false, }); return ( <> <Box height={"100vh"}> </Box> </> ); }; Interactions.withLayout = (page: ReactElement) => { // how do I pass isInteractionsLoading as a prop to this component return <Layout>{page}</Layout>; }; export default Interactions; 我想要实现的是将 isInteractionsLoaded 和 isInteractionsError 作为属性传递给我的布局组件,以便我可以渲染这些状态。有没有一种方法可以实现此目的,而无需将布局组件移动到页面组件内? 创建一个包装组件的 React Context 提供程序可能是您使用的解决方案,如果您不想使用任何其他包或不想使用 redux 等更强大的工具,则可以使用。 但是在这里使用有点尴尬,具体取决于包含交互的组件树是什么样子。否则可以根据您的需要使用 _app 入口点。 示例上下文和用法 import React from 'react'; export const InteractionContext = React.createContext({ isInteractionsLoading: false, isInteractionsError: null, }); // parent component or _app if necessary const ProviderComponent = () => { return ( <InteractionContext.Provider value={{ isInteractionsLoading, isInteractionsError }}> <Interactions /> </InteractionContext.Provider> ); }; const Layout = ({ children }) => { const { isInteractionsLoading, isInteractionsError } = useContext(InteractionContext); // Now you can use isInteractionsLoading and isInteractionsError here // ... return <div>{children}</div>; };


如何使用 Angular 服务创建 nx 库

我有几个 Angular 应用程序在 nx 工作区中运行。所有这些应用程序都使用 Angular Material 对话框。为此,我通常创建这样的 Angular 服务: 导入 { 管理组件 }


angular-2-dropdown-multiselect - 自定义宽度 100%

我正在实现这个 angular-2-dropdown-multiselect 组件: https://www.npmjs.com/package/angular-2-dropdown-multiselect 该组件工作正常,但我需要将其设置为适合续...


Angular-NG8001 未知元素错误。怎么解决?

我的 Angular 项目有问题。我有一个项目结构:应用程序结构。在我的 app.module.ts 中,代码如下: 从'@angular/core'导入{NgModule}; 从'@


Angular 项目不适用于@babylonjs/viewer

我在全球安装了@Angular/[email protected]。我使用命令行“ng new BabylonTest --routing false --style css --skip-git --skip-tests”创建了一个 Angular 项目。 CD 到文件夹“Babyl...


使用模块联盟进行 Angular 升级 - “集合没有原理图。”

我正在将一组 Angular 应用程序从 v12 升级到 v16,它们使用模块联合和 Angular Architects 的模块联合插件。 成功升级每个应用程序的 Angular 版本后...


Material-UI DataGrid 隐藏特定单元格的标题分隔符

有没有办法隐藏特定(或所有)单元格的标题列分隔符? 这是我的列定义 const orderCols = [ { 字段:'DOCDATE', headerName:'Fecha',flex:1 ...


Node Sass 版本 9.0.0 与 ^4.0.0 不兼容

我的应用程序中没有安装node-sass或sass包。但我一直收到这个错误 ./src/scss/styles.scss 中的错误(./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plu...


放大init UnauthorizedException

我正在使用以下文档学习放大器 https://docs.amplify.aws/angular/start/getting-started/installation/ https://docs.amplify.aws/angular/start/getting-started/setup/ 但同时


显示:flex认为它是显示:块

在我多年的编码生涯中,我从未遇到过像我现在在屏幕上看到的那样荒谬的事情。 我已经实现了一个 display:flex 属性,带有...


如何避免元素改变其大小和位置?

我有三个段落元素。三人分成三部分。我不希望它们改变大小或位置。但我无法做到这一点。也许用flex可以做到。 CSS 真的...


登录后,使用 angular-oauth2-oidc 时,hasValidAccessToken 始终为 true

我已经使用 Angular 12.2 实现了 angular-oauth-oidc (版本 12.1.0)。我使用 Keycloak 作为 SSO 登录没有问题,但我在库中遇到了奇怪的行为。 每次,之后...


通过Angular到Springboot访问POST失败但GET成功,Postman适用于GET和POST

我正在使用示例 Angular 应用程序来测试 Okta 与 springboot 应用程序的集成。 前端示例:https://github.com/okta-samples/okta-angular-sample 我有一个带有


面临 Angular 17 和 Firebase 的问题

当我尝试在 Angular 17 应用程序中添加软件包时,它无法安装该软件包。它总是显示下面给出的错误。 ng 添加@angular/fire 跳过安装:软件包已安装 更新


使用flex-wrap的div的父div在换行时不会减少其宽度

我有一个div。内容有两个div .SubHeader 包含我的标题和按钮 .具有 2 个子分区的板: .第一部分(前两列) .SecondPart(最后两列) 我希望减少时...


类型“string”无法分配给类型“FormGroup<any>”Angular 14 错误

我是一名初学者 Angular 开发人员,我正在使用本教程构建一个 todoList 应用程序 -> https://www.youtube.com/watch?v=WTn2nVphSl8 它是使用 Angular 13 完成的。我遇到错误的是我...


如何使最新的 Angular 版本与旧浏览器兼容?

Angular 在其文档中声明,它与所有主要浏览器的 2 个最新版本(以及 Firefox 的最新+ESR)兼容。由于 Angular 在底层使用标准 DOM API,因此它应该...


为什么 Angular 2 或 Angular 4 使用香蕉括号?有什么具体原因吗?为什么它们不遵循与 Angular 1 相同的模式?

我知道,它与任何编码无关,但它们可以遵循与 AngularJS 中相同的语法 有角度...


Angular Material 17 独立组件中没有 DateAdapter 的提供者

我有一个带有 Angular 17 应用程序的 nx 项目,并尝试使用带有材料 17.0.4 的 Angular 材料日期选择器。但我明白了 NullInjectorError:没有 DateAdapter 的提供者! 错误。组件...


应用程序无法识别手势,例如在 Angular 11 中使用 Hammer.JS 进行平移

我无法在使用 Hammer.JS 的 Angular 应用程序中识别任何手势,例如滑动、平移。它的设置是这样的: 包.json: “@角度/核心”:“11.0.5”, “@Angular/platform-br...


如何将弹性项目居中而忽略其边距?

如何在忽略边距时使两个弹性项目居中?在下面的示例中,h1 的边距不对称,当使用align-items:center 时,它看起来不太好。我不想将 flex 放在 h1 元素 b 上...


表格标题背景颜色动态变化 - Angular 材质

我按照这个例子来实现角度材料表。 https://stackblitz.com/angular/jejeknenmgr?file=src%2Fapp%2Ftable-basic-example.ts 在这里,我使用...


如何将子组件与父组件一起使用 - Angular

我创建了这个名为country-flag-dropdown.ts和html的组件 成分: 从“@angular/core”导入{Component、OnInit、Input、Output、EventEmitter}; 导入 {FormGroup, FormControl} ...


使用媒体查询在较小的屏幕上切换列顺序

我创建了2列4行,每一个都是一个flex元素,它变成文本-图片,然后切换。 当您调整窗口大小时,它会变成text-img-img-text,但我想要变成text-img-text-img。 ....


如何在 Angular 17 中为传单图像配置加载器?

我是最近的 Angular 用户,我有一个 Angular 17 项目,带有传单地图。 当我尝试构建该项目时,传单地图的 3 个图像(标记图标和图层)出现 3 个错误: 是否...


如何让新的 Angular 17 项目运行?

全新安装 Nodejs (20.10.0) 和 Angular (17.0.8)。新项目(“ng new Default”),没有文件更改。 “ngserve”没有错误,但浏览器控制台显示: main.ts:5 错误


如何在flex-grow容器中创建响应式表格而不影响整体布局?

我正在使用 Bootstrap 5.3 开发响应式布局,其中包括导航栏、侧栏、内容面板和状态栏。该应用程序应始终为 100% 视图高度和视图宽度,并包含所有信息...


为什么我的应用程序根目录在 Angular 中不是 100% 高度?

这是我的第一个 Angular 项目,我对 Web 开发还很陌生。我正在使用 Angular 17.0.9。 我希望我的应用程序为 100%,但应用程序根标签始终是可能的最小高度 当你...


如何配置 Angular 17 开发服务器将 HTTP 重定向到 HTTPS?

我已将 Angular 开发服务器配置为成功使用带有 SSL 的 HTTPS: “端口”:4200, “ssl”:正确, "sslKey": "./tools/.ssl/localhost+2-key.pem", “SSL...


我已将 Angular 版本 8、9、10 升级到 16。收到此错误 NG8001:“mat-icon”不是已知元素

我已将 Angular 版本 8、9、10 升级到 16。在 Angular 16 版本上面临以下问题。我已经导入了模块文件中的所有材质模块。然后它也会给出错误。


Angular Material 5 深色主题未应用于机身

我创建了一个“自定义”主题(使用 https://material.angular.io/guide/theming 上的主题文档,这非常糟糕),如下所示: @import '~@angular/material/theming'; @包括 mat-cor...


Angular 17:fileReplacements 不替换文件

我有一个 C#/Angular 17 SPA 项目,在具有多个部署槽的 Azure 应用服务上的 Docker 容器中运行。基本上,生产槽加载标记为“latest-prod”的图像......


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